Petit code pour un effet moodboard avec cadre autour des images, pour un rendu carré. Adapté pour les forums de 800px. En cas de soucis ou d’envie de modifier, fais-moi un message ! Le code resize les images de façon à ne rien déformer. Le format des cadres est fixe.
Le code est libre d’utilisation, mais un petit crédit à drake passe toujours bien !
———————————————-
Partie feuille de style
.parent {
display: grid;
grid-template-columns: repeat(2, 150px) 100px 160px 1fr;
grid-template-rows: 160px 130px 150px 130px 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9 {
background-position: 50%;
background-size: cover;
border-radius: 3px;
border: white 7px solid;
}
.div1 {grid-area: 1 / 2 / 2 / 3;}
.div2 {grid-area: 2 / 2 / 4 / 4;}
.div3 {grid-area: 1 / 1 / 3 / 2;}
.div4 {grid-area: 3 / 1 / 4 / 2;}
.div5 {grid-area: 1 / 3 / 2 / 5;}
.div6 {grid-area: 4 / 1 / 5 / 3;}
.div7 {grid-area: 2 / 4 / 3 / 5;}
.div8 {grid-area: 3 / 4 / 5 / 5;}
.div9 {grid-area: 4 / 3 / 5 / 4;}
<div class=“parent”><div class=“div1” style=“background-image:url(#URL_ICI)”></div><div class=“div2” style=“background-image:url(#URL_ICI)”></div><div class=“div3” style=“background-image:url(#URL_ICI)”></div><div class=“div4” style=“background-image:url(#URL_ICI)”></div><div class=“div5” style=“background-image:url(#URL_ICI)”></div><div class=“div6” style=“background-image:url(#URL_ICI)”></div><div class=“div7” style=“background-image:url(#URL_ICI)”></div><div class=“div8” style=“background-image:url(#URL_ICI)”></div><div class=“div9” style=“background-image:url(#URL_ICI)”></div></div>
tangentwithtanner
ellievsbear
turnnoffyourmind
gummygunk
kianamaiart
2087
