Purée, les Grid en CSS c’est trop bien !

J’avais déjà été ébloui par les flex-box et leur possibilités (voir là), mais les grid ne sont pas en reste non plus !

Par exemple, je veux faire un formulaire pour remplir sont adresse postale, sous la forme suivante :

|--------------------------|
| n° | nom de rue          |
|--------------------------|
| complément               |
|--------------------------|
| cp     | ville           |
|--------------------------|
| état        | pays       |
|--------------------------|

C’est à dire en respectant la disposition des champs. (un peu comme là)

Le truc, c’est que j’ai juste un seul <div> avec sept <input> qui se suivent. Je ne veux pas utiliser de <p> ou de <br/>.

La solution ? Les grid (comme dans Tron) !

Je déclare le <div> comme étant une grille, divisée en 10 sections de 10 % chacune sur la largeur. Pour les lignes, le retour à la ligne est automatique ici (mais le grid permet également de modifier ça comme on veut !).

Ensuite, je donne à chaque <input> sa position : numéro de ligne, numéro de colonne et un sorte de « colspan ».

J’en ai fait un codepen pour voir ça directement : https://codepen.io/lehollandaisvolant/pen/aPjBXK?editors=1100

Et tout est parfaitement aligné, responsive et flexible ! C’est ça qui est tellement mieux qu’avec des floats !

— (permalink)