Une colonne ou zéro
Les éléments s'empilent les uns sur les autres, autant de lignes implicites que nécessaire sont ajoutées.
Démo
<head>
<style>
.grille{
width:60%;
display:grid;
}
article:nth-child(1){
background-color:pink;
}
article:nth-child(2){
background-color:YellowGreen;
}
article:nth-child(3){
background-color:Gold;
}
article:nth-child(4){
background-color:salmon;
}
article:nth-child(5){
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
Par défaut, en ligne
On crée une grille de 3 lignes et 3 colonnes avec un flux (distribution) par défaut.
Le remplissage de la grille se fait de gauche à droite, au bout de la ligne 1 on passe à la ligne 2 et ainsi de suite.
Démo
<head>
<style>
.grille{
width:60%;
display:grid;
grid-gap:5px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,minmax(75px,auto));
/*grid-auto-flow:row;*/
}
article:nth-child(1){
background-color:pink;
}
article:nth-child(2){
background-color:YellowGreen;
}
article:nth-child(3){
background-color:Gold;
}
article:nth-child(4){
background-color:salmon;
}
article:nth-child(5){
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
En colonne
On crée une grille de 3 lignes et 3 colonnes avec un flux (distribution) en colonne.
Le remplissage de la grille se fait de haut en bas, au bout de la colonne 1 on passe à la colonne 2 et ainsi de suite.
Démo
<head>
<style>
.grille{
width:60%;
display:grid;
grid-gap:5px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,minmax(75px,auto));
grid-auto-flow:column;
}
article:nth-child(1){
background-color:pink;
}
article:nth-child(2){
background-color:YellowGreen;
}
article:nth-child(3){
background-color:Gold;
}
article:nth-child(4){
background-color:salmon;
}
article:nth-child(5){
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
Dense
On crée une grille de 3 lignes et 3 colonnes avec un flux (distribution) en colonne.
Ce qui suit n'est vrai que pour les éléments dont le placement est semi-défini.
On crée une grille de 3 lignes et 3 colonnes avec un flux (distribution) en colonne.
Le remplissage de la grille se fait selon un algorithme de placement destiné à remplit au maximum les cellules vides.
Démo
<head>
<style>
.grille{
width:60%;
display:grid;
grid-gap:5px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,minmax(75px,auto));
grid-auto-flow:dense; /*voir différence avec row*/
}
article:nth-child(1){
background-color:pink;
grid-column:1/3;
}
article:nth-child(2){
background-color:YellowGreen;
grid-column:1/4;
}
article:nth-child(3){
background-color:Gold;
}
article:nth-child(4){
background-color:salmon;
}
article:nth-child(5){
background-color:skyblue;
}
</style>
</head>
<body>
<main class=grille>
<article>
<h1>Ma chambre</h1>
<div>
<p>J'y dors si bien...</p>
</div>
</article>
<article>
<h1>Mon salon</h1>
<div>
<p>J'y regarde la télévision...</p>
</div>
</article>
<article>
<h1>Mon jardin</h1>
<div>
<p>J'y fais ma siste...</p>
</div>
</article>
<article>
<h1>Mon garage</h1>
<div>
<p>Qu'elle est belle ma voiture...</p>
</div>
</article>
<article>
<h1>Mes projets</h1>
<div>
<p>Pas trop mes casser le c..</p>
</div>
</article>
</main>
</body>
