5.3. Présentation en colonnes et en grille

La présentation en colonnes et en grille est une technique courante en CSS pour structurer et organiser le contenu d'une page web. Cette approche permet de créer des mises en page flexibles et réactives, adaptées à différents dispositifs et tailles d'écran.

1. Présentation en colonnes avec Flexbox

Flexbox est une disposition flexible de boîtes en CSS qui permet de disposer facilement les éléments dans une mise en page en colonnes. Voici un exemple de base :

<div class="container">
    <div class="column">Colonne 1</div>
    <div class="column">Colonne 2</div>
    <div class="column">Colonne 3</div>
</div>

.container {
    display: flex;
}
 
.column {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
}

Dans cet exemple, les éléments enfants de .container sont disposés horizontalement grâce à display: flex;, et la propriété flex: 1; sur chaque colonne permet de répartir l'espace disponible de manière égale entre les colonnes.

2. Présentation en grille avec Grid Layout

Grid Layout est une méthode plus puissante pour créer des mises en page en colonnes et en lignes, offrant un contrôle plus précis sur la disposition des éléments. Voici un exemple de base :

<div class="grid-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Crée trois colonnes de largeur égale */
    grid-gap: 20px; /* Espacement entre les éléments */
}
 
.item {
    padding: 20px;
    border: 1px solid #ccc;
}

Dans cet exemple, display: grid; est utilisé pour créer une grille de disposition, et grid-template-columns: 1fr 1fr 1fr; spécifie que la grille aura trois colonnes de largeur égale. La propriété grid-gap définit l'espacement entre les éléments.

3. Présentation en colonnes réactives

Pour rendre les colonnes réactives et s'adapter à différentes tailles d'écran, les Media Queries peuvent être utilisées pour ajuster la disposition en fonction de la largeur de l'écran. Voici un exemple :

.container {
    display: flex;
    flex-wrap: wrap;
}
 
.column {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
}
 
@media screen and (max-width: 600px) {
    .column {
        flex-basis: 100%; /* Chaque colonne occupe la largeur totale sur les petits écrans */
    }
}

Dans cet exemple, lorsque la largeur de l'écran est inférieure à 600 pixels, chaque colonne occupe la largeur totale de l'écran grâce à flex-basis: 100%;, assurant ainsi une présentation réactive sur les petits dispositifs.

Conclusion

La présentation en colonnes et en grille avec CSS offre une flexibilité et un contrôle précis sur la disposition des éléments dans une mise en page web. Que ce soit avec Flexbox pour une disposition flexible en colonnes ou avec Grid Layout pour une disposition plus complexe en grille, ces techniques permettent de créer des designs web modernes et réactifs. Expérimentez avec différentes propriétés CSS pour obtenir les résultats désirés dans vos projets de conception web.