CSS - display

 

Quadriller l'espace

🚀Dans le simulateur Grid-simu

Ajouter : 

.conteneur:after { content: ""; position: absolute; z-index : 1; top: 0px; right: 0; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px; } .conteneur { position: relative; background-color: white ! important; }

Autre exemple

🚀voir https://dupontl1.blogspot.com/2025/02/damiercss.html

100% height : 🚀

Vidéo

CSS ++

 

Simulateur on gitHub

 https://dupontdenis.github.io/simulateur/

Grid : without dense

Reprenez le simulateur : https://dupontcss.blogspot.com/p/test-grill.html

Ecrivez le code suivant :

.conteneur {

        display:grid;
        grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;
        grid-auto-rows: 100px;

    }

     #it1 {

grid-column: A

     }

     #it2 {

grid-column: A

     }

     #it3 {

grid-column: C

     }

     #it4 {

grid-column: C

     }

Ajoutez la régle grid-auto-flow: dense au conteneur : 

  .conteneur {

        display:grid;

        grid-template-columns: [A] 1fr [B] 1fr [C] 1fr [D] 1fr 1fr;

        grid-auto-rows: 100px;

        grid-auto-flow: dense;

     }

Autre idée !

Remplacez grid-auto-flow: dense par  grid-auto-flow: column;

Testez la régle grid-auto-flow: column; dans l'exemple suivant : 

Résumé sur le placement :

Le flux est en ligne, un element qui a sa colonne fixée bloque le flux !

notez

Le flux est en colonne, on ne peut passer devant un element qui a sa ligne fixée.

notez

Projet grid

Help : 

CSS : 10 premieres minutes !