#drake.

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;}

----------------------------------------------

Partie post 

----------------------------------------------

<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>