CSS Mise en page de grille à 12 colonnes
Mise en page de grille CSS à 12 colonnes
Une grille à 12 colonnes est une méthode courante et flexible pour structurer le contenu des pages web, en particulier pour le design web réactif.
Le système de grille à 12 colonnes divise l'espace horizontal disponible en 12 colonnes de largeur égale, permettant un placement et un dimensionnement précis des éléments dans la mise en page.
Avantages d'une grille à 12 colonnes
- Flexibilité : Le nombre 12 est hautement divisible. Les designers peuvent facilement créer des mises en page avec des moitiés, des tiers et des quarts (2 colonnes de 6, 3 colonnes de 4, 4 colonnes de 3).
- Réactivité : Une grille à 12 colonnes est idéale pour construire des sites web réactifs qui s'adaptent à différentes tailles d'écran (bureau, tablette ou mobile) grâce aux mediaqueries. Cela offre une expérience utilisateur cohérente sur toutes les plateformes.
- Efficacité : Avoir une structure pré-définie accélère le processus de conception.
Voici comment créer une mise en page de grille CSS de base à 12 colonnes :
Définir le conteneur de la grille
Appliquez display: grid; au conteneur de la grille.
Créer les 12 colonnes
Utilisez la propriété grid-template-columns pour définir les 12 colonnes.
Le code repeat(12, [col-start] 1fr); crée une grille à 12 colonnes de largeur égale et nomme la ligne de départ de chaque colonne col-start .
-
repeat(12,..): Indique à la grille de répéter la définition de piste suivante 12 fois, résultant en 12 colonnes. -
[col-start]: Cela crée une ligne de grille nommée. Comme elle est répétée 12 fois, vous aurez 12 lignes nommées col-start. Cela est utile pour placer des éléments de grille à des points de départ spécifiques dans la grille. -
1fr: Une unité fractionnaire qui représente une fraction de l'espace total disponible dans le conteneur de la grille. En utilisant 1fr, chacune des 12 colonnes aura une largeur égale et fluide.
Placer les éléments de la grille
Les éléments de la grille peuvent ensuite être placés et dimensionnés à travers ces 12 colonnes en utilisant grid-column .
- Pour faire en sorte qu'un élément de grille s'étende sur un certain nombre de colonnes, utilisez
grid-column: span <number>;ougrid-column: <start-line> / span <number>;. - Vous pouvez également définir les lignes de grille de début et de fin pour un élément en utilisant
grid-column: <start-line> / <end-line>;.
Utiliser des mediaqueries pour ajouter des points de rupture
Concevez toujours d'abord pour mobile : Ici, nous affichons les sections dans l'ordre source (de haut en bas) pour les écrans de moins de 576 pixels de large.
Ensuite, nous passons à une mise en page à deux colonnes pour les écrans entre 576 et 767 pixels de large.
Puis, nous passons à une mise en page à trois colonnes pour les écrans de plus de 767 pixels de large.
Exemple
Exemple complet d'une mise en page de grille à 12 colonnes :
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}