🅰️ Pour toutes les questions, les blocs dans le conteneurs sont des <div>.
Bloc 1 : Bloc Rouge 
|
Bloc 2 : Bloc Bleu 
|
Bloc 3 : Bloc Vert
|
Bloc 4 : bloc Noir  |
🪛Dessinez les quatres blocs (R,B,V,N) dans le conteneur.

| .conteneur { display: grid; grid-template-columns: repeat(2, 1cm); grid-auto-flow: column } |
Autre test :

| .conteneur { display: grid; grid-template-columns: repeat(4, 2cm); grid-auto-rows: 1cm; grid-auto-flow: row; }
div:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
div:nth-child(2) { grid-column: 3/5; grid-row: 2 / 5; }
div:nth-child(3) { grid-row-end: span 2; }
div:nth-child(4) { grid-column-end: span 2; } |
🆘 Pour vérifier votre réponse, vous pouvez utilisez un simulateur !
Couleur pleine !
Couleur hachée