Apprendre la grille CSS : guide simple avec de nombreux exemples

Salut ! Si vous avez déjà eu l'impression que CSS Grid, c'est un peu comme essayer de résoudre un Rubik's Cube les yeux bandés, vous n'êtes pas seul. Je m'appelle Eleftheria et aujourd'hui, je suis là pour vous aider à naviguer facilement dans la grille CSS. Allons-y. ?

Introduction à la grille CSS

CSS Grid est conçu pour vous permettre de créer des mises en page complexes en deux dimensions qui étaient auparavant un véritable casse-tête à réaliser. Avant Grid, nous jonglions avec des flottants, des tableaux ou des flexbox pour les mises en page. Grid est arrivé et a dit : « Tiens ma bière », offrant un moyen plus intuitif et plus puissant de structurer les pages Web.

Pourquoi apprendre la grille CSS ?

• Efficacité

   : Grid simplifie la façon dont vous concevez des mises en page, réduisant le besoin d'éléments imbriqués uniquement à des fins de mise en page.

• Flexibilité

   : C'est fantastique pour un design réactif, s'adaptant parfaitement aux différentes tailles d'écran.

• Puissance

   : Avec Grid, vous pouvez facilement aligner des éléments verticalement et horizontalement, ce qui était un cauchemar avec les anciennes méthodes.

Les bases de la grille CSS

Commençons par le tout début. Pour utiliser CSS Grid, vous devez définir un conteneur sous forme de grille. Par exemple :

.container { display: grid;}

Cette ligne simple transforme le .container en un conteneur de grille, ce qui signifie que ses enfants directs deviendront des éléments de grille.

Création de colonnes et de lignes de grille

Vous définissez la structure de la grille en spécifiant les colonnes et les lignes :

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal width */
    grid-template-rows: auto auto auto;  /* Three rows with automatic height */
}

Ici, 1fr signifie une fraction de l'espace disponible, ce qui rend les colonnes égales en largeur.

Placer des éléments dans la grille

Vous pouvez placer des éléments dans des zones spécifiques à l'aide des propriétés de colonne de grille et de ligne de grille :

.item-a {
    grid-column: 1 / 3; /* Start at line 1, end at line 3 */
    grid-row: 1 / 2;    /* Span from line 1 to line 2 */
}

Cela place .item-a à partir de la première ligne de colonne jusqu'à la troisième, et jusqu'à la première ligne.

Lignes et zones de quadrillage

Vous pouvez nommer les lignes pour une référence plus facile :

.grid-container {
    grid-template-columns: [start] 1fr [line2] 1fr [end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row3-end];
}

Alors utilisez ces noms :

.item-b {
    grid-column: start / line2;
    grid-row: row1-start / row2-start;
}

Zones de la grille

Pour une approche plus visuelle, vous pouvez nommer les zones :

.grid-container {
    display: grid;
    grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Ensuite, attribuez des éléments à ces zones :

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
</div>

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Plus d'exemples de grille CSS en action

1. Mise en page réactive avec requêtes multimédias

L'un des points forts de CSS Grid est sa facilité à gérer les conceptions réactives. Voici un exemple qui montre comment ajuster la disposition des grilles pour différentes tailles d'écran

 :

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

Cette configuration crée une grille dans laquelle chaque élément mesure au moins 300 px de large mais s'agrandit pour occuper l'espace disponible. Sur les écrans inférieurs à 768 px, la disposition passe à une seule colonne.

2. Mise en page complexe : style de magazine

Imaginez une page de magazine avec un grand article vedette, des articles parallèles plus petits et des publicités :

<div class="grid-container">
    <article class="featured">Featured Article</article>
    <article class="side">Side Article 1</article>
    <article class="side">Side Article 2</article>
    <div class="ad">Advertisement</div>
    <footer class="footer">Footer</footer>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "featured featured ad"
        "side1 side2 ad"
        "footer footer footer";
    gap: 10px;
}

.featured { grid-area: featured; }
.side:nth-child(1) { grid-area: side1; }
.side:nth-child(2) { grid-area: side2; }
.ad { grid-area: ad; }
.footer { grid-area: footer; }

Cet exemple utilise des zones de grille nommées pour créer une mise en page complexe mais visuellement attrayante.

3. Grilles imbriquées pour la conception de composants

Pour les composants de votre grille, vous pouvez imbriquer des grilles :

<div class="grid-container">
    <div class="card">
        <h2 class="card-title">Card Title</h2>
        <div class="card-content">
            <p>Content Here</p>
            <button class="card-button">Action</button>
        </div>
    </div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.card-title {
    /* Styles for title */
}

.card-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.card-button {
    align-self: flex-start;
}

Ici, chaque carte elle-même utilise une grille pour disposer son titre et son contenu, démontrant comment les grilles peuvent être imbriquées pour un contrôle précis des éléments de conception.

4. Grille dynamique avec images

Pour une galerie ou un portfolio :

<div class="gallery">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <!-- More images -->
</div>

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
}

Cette grille s'ajuste dynamiquement pour remplir le conteneur d'images, chacune d'au moins 200 px de large, en s'insérant autant que possible dans chaque ligne.

Fonctionnalités avancées de la grille

• Grid Auto-Flow

   : Place automatiquement les éléments.

• Grid Gaps

   : Ajoute de l'espace entre les cellules de la grille.

• Minmax()

   : définit une plage de tailles pour les lignes ou les colonnes.

Flux automatique de grille

Grid Auto-Flow

contrôle la manière dont le navigateur doit remplir la grille avec des éléments lorsqu'ils ne sont pas explicitement placés. Par défaut, les éléments sont placés dans l'ordre des lignes principales, ce qui signifie que les éléments remplissent les lignes avant de passer à la ligne suivante. Cependant, vous pouvez modifier ce comportement :

• row

   : Le comportement par défaut où les éléments sont placés dans des lignes avant de passer à la colonne suivante.

• colonne

  : Les éléments sont placés en colonnes avant de passer à la ligne suivante.<script> // Detect dark theme var iframe = document.getElementById('tweet-1832648056296063240-389'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1832648056296063240&theme=dark" } </script>

• dense : This option tells the browser to fill in gaps in the grid as items are placed, potentially rearranging items to avoid empty spaces. This can result in an "optimal" arrangement but can also lead to unexpected layouts if not used carefully.

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column; /* Items will fill by column before moving to next row */
}

Grid Gaps (or Gutter)

Grid Gaps add space between grid cells, which is crucial for visual breathing room in your layout. You can set gaps for rows, columns, or both:

Example:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 40px; /* 20px vertical gap, 40px horizontal gap */
    grid-row-gap: 30px; /* Alternative for vertical gap */
    grid-column-gap: 50px; /* Alternative for horizontal gap */
}

Using gap is shorthand for both grid-row-gap and grid-column-gap. This feature helps in creating a more polished and organized look, making your content feel less cramped.

Minmax() Function

The Minmax() function in CSS Grid allows you to define a size range for grid tracks (rows or columns). This is extremely useful for creating flexible yet controlled layouts:

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

• minmax(min, max): Here, min is the minimum width (or height for rows) the track can take, and max is the maximum. The track will grow from min to max as more space becomes available.

• auto-fill inside repeat alongside minmax means the browser will automatically generate as many columns as fit within the container, each having a minimum width of 100px but can expand if there's space.

• 1fr means the track can grow to take up an equal fraction of the available space if there's room after all minimum sizes are accounted for.

Real Example Use:

Imagine designing a dashboard where you want cards to have at least 200px width but grow to fill the space without exceeding 400px:

Solution:

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
    gap: 20px;
}

This setup ensures each card is visible and usable on smaller screens while maximizing space on larger displays.

• Grid Auto-flow helps in managing how items are naturally placed within your grid, optimizing for space or maintaining order.

• Grid Gaps provide the breathing room that makes layouts more visually appealing and user-friendly.

• Minmax offers the flexibility to design layouts that adapt beautifully to different screen sizes and content volumes.

Conclusion

I hope by now, you've seen Grid not just as a layout tool, but as a creative companion in your web design adventures. CSS Grid has transformed how we approach layout design, offering a blend of simplicity and power that was hard to imagine before its arrival.

Remember, mastering Grid isn't about memorizing every property or function, but understanding its logic. Like learning any new language, it's about practicetrying out different configurations, seeing how elements respond, and adapting your design to the fluidity of the web.

As you incorporate Grid into your projects, whether they're personal blogs, complex dashboards, or innovative web applications, you'll find yourself equipped to handle challenges with elegance and efficiency. Keep this guide handy, refer back to these examples, and most importantly, keep experimenting.

Thank you for joining me on this exploration of CSS Grid.

---

? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.

? If you liked this article, consider sharing it.

? All links | X | LinkedIn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!