test-flex ++
Allez dans http://dupontcss.blogspot.com/p/test-grill.html
Que serait le résultat pour le CSS suivant ?
.conteneur { display : flex; flex-wrap : wrap; align-content : center; align-items:center; } .conteneur * { flex: 0 0 50%; }
#it1 {
height : 100px;
}
#it4 { height : 50px; }
Grid : dense
Des algorithmes puissants au service du placement.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: row;
}
}
Sans détailler les algorithmes, en voici le principe.
1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.
2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.
Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.
Algorithme par l'exemple
Sans détailler les algorithmes, en voici le principe.
1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.
2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.
Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.
Algorithme automatique avancé
Inscription à :
Commentaires (Atom)