Qu'est-ce que la disposition de la grille CSS-connaissance CSS-php.cn

Qu'est-ce que la disposition de la grille CSS

藏色散人

Libérer： 2021-01-11 11:21:19

original

6559 Les gens l'ont consulté

Cet article vous présente principalement les connaissances de base du CSS Grid Layout, c'est-à-dire Grid Layout.

Étude de référence recommandée : "Tutoriel CSS"

Pour les débutants front-end, le concept de CSS Grid Layout peut être un peu inconnu. En fait, c’est très facile à comprendre. Nous savons tous que CSS est utilisé pour mettre en page les styles de pages Web. Nous devons généralement prendre en compte les problèmes de mise en œuvre du piratage tels que la compatibilité des pages Web, le flottement des boîtes et le positionnement de la grille CSS, également connue sous le nom de disposition de la grille CSS. créé spécifiquement pour résoudre ce problème.

En termes simples, CSS Grid Layout est un système de mise en page bidimensionnel basé sur une grille qui peut gérer à la fois les colonnes et les lignes, l'objectif est de changer la façon dont. nous interagissons avec les utilisateurs sur la base de la conception de la grille.

Ci-dessous, nous vous présenterons la disposition de la grille à travers un simple Exemple de disposition de la grille :

Un exemple de code simple de disposition de la grille est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid网格布局示例</title>
</head>
<style>
 .wrapper {
        display: grid;
 grid-template-rows: 100px 100px 100px;
 }
    .item1 {
        grid-column-start: 1;
 grid-column-end: 4;
 }
    .item1{

        background: #333333;

 }
</style>
<body>
<div class="wrapper">
    <div class="item1" style=" background: #745A74;">大导航</div>
    <div class="item2" style="background: #CCCC66">2</div>
    <div class="item3" style="background: #FFCFCF">3</div>
    <div class="item4" style="background: aquamarine">4</div>
    <div class="item5" style="background: chartreuse">5</div>
    <div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant : Quest-ce que la disposition de la grille CSS

Dans le code ci-dessus, nous définissons l'attribut display:grid sur le conteneur spécifié pour indiquer que nous allons commencer à utiliser la disposition en grille, c'est-à-dire que nous définirons l'élément comme un conteneur de grille, définirons la taille des colonnes (grid-template-columns) et des lignes (grid-template-rows), puis placerons les éléments enfants dans le conteneur par colonne de grille et ligne de grille.

Introduction à l'attribut important :

grid-template-rows L'attribut définit les lignes de la grille en fonction des dimensions des lignes de la grille Le nom et la taille de la piste de grille.

grid-template-columns L'attribut est basé sur les dimensions des colonnes de la grille et définit le nom des lignes de la grille et la taille des pistes de la grille.

Grid-column-start La propriété spécifie la position de départ de l'élément de grille dans la colonne de la grille en contribuant une ligne, une étendue ou automatiquement. Cette position de départ définit le bord de départ du bloc de la zone de grille. La propriété

Grid-column-end spécifie la fin de l'élément de grille dans la colonne de la grille en plaçant une ligne de contribution, une étendue ou Aucun (auto) au position de la grille, spécifiant ainsi le bord d'extrémité du bloc pour sa zone de grille.

Cet article est une introduction aux connaissances de base simples de la Disposition de la grille CSS. J'espère qu'il sera utile aux amis dans le besoin !

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!