Depuis l’annonce de Joomla concernant l’adoption de CSS Grid dans Joomla 4, de nombreux développeurs ont manifesté leur intérêt pour CSS Grid.
Dans un précédent article, nous avons abordé les bases du CSS Grid.
Dans cet article, nous allons examiner de plus près la propriété Autoflow de CSS Grid.
Vous savez déjà que les éléments de la grille sont placés dans la grille de manière explicite via un algorithme, au cas où vous n'auriez pas défini suffisamment de lignes pour placer les éléments.
Regardons un exemple.
Le code HTML
- Ouvrez l'éditeur de texte de votre choix.
- Créez un fichier HTML.
- Si l'extension Emmet est installée dans votre éditeur, vous pouvez taper ce code :
.container>.item{$}*6
- Appuyez sur la touche "Tab".
- Si l'extension Emmet n'est pas installée, copiez et collez ce code :
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
Le code CSS
- Créez un fichier CSS et liez-le à votre fichier HTML
- Ajoutez les styles globaux suivants :
/* GLOBAL STYLES */
* {
box-sizing: border-box;
} body {
background-color: #AAA;
margin: 50px;
} /* Each item in the grid contains numbers */ .item {/* Center the contents of the grid items. Making each grid item a Flex Container */
display: flex; /* Horizontal and Vertical centering */
justify-content: center;
align-items: center;
border: 5px solid #87b5ff;
border-radius: 3px;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
background-color: #1c57b5;
}
Maintenant, regardons ce que cela donne dans votre navigateur. Ouvrez le fichier HTML. La page devrait ressembler à l'image ci-dessous :
Les styles de grille
Pour déclarer l'élément .container en tant que conteneur de grille, ajoutez le code suivant à votre fichier CSS :
.container
{
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;
Le conteneur aura une largeur de 900px. Chaque colonne aura une largeur de 200px. Chaque ligne déclarée aura une hauteur de 75px.
Il y aura un écart entre les colonnes et les lignes de 15px. La grille ressemble maintenant à ceci :
Ouvrez l'inspecteur de code de votre navigateur et sélectionnez le conteneur de grille
Vous pouvez voir par la ligne continue entourant tous les éléments de la grille, que tous ces éléments sont placés dans la grille explicite.
- Ajouter 3 éléments supplémentaires à la structure HTML
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Les éléments 1 à 8 sont placés dans la grille explicite, celle qui a été déclarée.
L'élément 9 a été placé dans la grille implicite. Vous pouvez le voir grâce à la ligne en pointillée affichée par votre inspecteur de code.
Cela signifie que le navigateur a placé cet élément dans la grille à l'aide d'un algorithme de placement.
Le flux de cette grille est basé sur les lignes, car les éléments sont acheminés vers la ligne suivante lorsqu'il n'y a plus d'espace disponible.
C'est le comportement par défaut de CSS Grid. Les éléments circulent de gauche à droite et se terminent dans la rangée suivante, comme dans les langues occidentales.
La propriété grid-auto-flow
La propriété grid-auto-flow vous permettra de placer les éléments de la grille dans un flux basé sur les colonnes.
Ajoutez cette ligne à votre fichier CSS, enregistrez et observez le résultat dans votre navigateur :
.container
{
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;
grid-auto-flow: column;
}
Le flux de la grille est maintenant basé sur les colonnes. L'élément 9 est toujours dans la grille implicite, mais il a été ajouté à la colonne suivante au lieu d'être ajouté à la ligne suivante.
Nous n'avons pas déclaré de largeur pour cette colonne. Cela signifie qu'elle aura une largeur définie automatiquement.
Attribuez à cet élément la même largeur que les autres éléments avec la propriété grid-auto-columns :
.container
display: grid;
width: 900px;
grid-gap: 15px;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 75px 75px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
Chaque nouvelle colonne aura désormais une largeur de 200px.
Défilement horizontal
Comme vous l’avez déjà remarqué, nous utilisons des unités fixes (px) dans cette grille.
Cela signifie que si vous continuez à ajouter des éléments de grille au conteneur, vous obtiendrez un effet de défilement horizontal sur votre écran.
Portez une attention particulière au dimensionnement des éléments de la grille si vous ne souhaitez pas que cela se produise.
Bien entendu, vous pouvez imaginer une utilisation pratique de cet effet, par exemple, une très longue chronologie horizontale.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
Il existe d'autres moyens de déclarer la largeur des colonnes, notamment avec des valeurs relatives (l'unité fr), mais nous verrons cela dans un autre tutoriel.
Vous venez d'apprendre à placer des éléments dans une grille basée sur une distribution par colonne à l'aide de la propriété CSS grid-auto-flow.
Testez cette fonctionnalité, jouez avec les balises et les styles et laissez-nous vos commentaires ci-dessous.
Articles qui devraient vous intéresser
Arrondir les bords d'une image avec Photoshop CS4
L'outil 3D de Photoshop CS4
