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
}
Autre idée !
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;
}
Remplacez grid-auto-flow: dense par grid-auto-flow: column;
Testez la régle grid-auto-flow: column; dans l'exemple suivant :
See the Pen pays drapeaux by dupont (@dupontcodepen) on CodePen.
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
See the Pen fetch img cat by dupont (@dupontcodepen) on CodePen.
Help :
CSS : 10 premieres minutes !
Inscription à :
Articles (Atom)