Que sont la disposition en grille CSS et la disposition flexible ?

En CSS, la disposition en grille fait référence à la « disposition en grille », qui est un système bidimensionnel capable de gérer à la fois les lignes et les colonnes. Elle peut être créée en appliquant des règles CSS à l'élément parent et aux éléments enfants de. cet élément. Utiliser la disposition en grille ; la disposition flexible fait référence à la « disposition flexible », qui est un système unidimensionnel utilisé pour offrir une flexibilité maximale pour les modèles en forme de boîte.

L'environnement d'exploitation de cet article : système Windows10, CSS3, ordinateur Thinkpad T480.

(Tutoriel recommandé : Tutoriel vidéo CSS)

1. Introduction à la mise en page flexible

Flex est une boîte flexible (élastique layout ) est un système unidimensionnel conçu pour offrir une flexibilité maximale aux modèles en forme de boîte.

Utilisation : n'importe quel conteneur (les éléments en ligne peuvent être définis pour display:inline-block) ;

Caractéristiques : la distribution de l'espace se fait dans la ligne, pas dans son ensemble

2. Introduction à la mise en page en grille

Gird Layout (mise en page en grille CSS) est le système de mise en page le plus puissant en CSS. Il s'agit d'un système bidimensionnel qui peut gérer simultanément les lignes et les colonnes. time.Il peut être traité par des règles CSS Utilisé pour qu'un élément parent (conteneur de grille) et les éléments enfants de cet élément (éléments de grille) utilisent la disposition en grille.

Utilisation : définissez dispay: grid; grid-template-colums et grid-template-rows sur l'élément parent pour définir le nombre de lignes et de colonnes, puis définissez le nombre de lignes et de colonnes occupées par l'enfant. élément

Caractéristiques : structure de grille bidimensionnelle, très facile à utiliser

Combat pratique 1 : utilisez la disposition de la grille pour créer une simple grille de neuf carrés

Code html :

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Code css :

.box{
    width: 1200px;
    height: 80vh;
    display: grid;  // 开启grid布局
    grid-template-columns: repeat(3,30%);   // 设置列
    grid-template-rows: repeat(3,30%);  // 设置行
    grid-column-gap: 20px; // 设置网格之间的间距
    grid-row-gap: 20px; // 设置网格之间的间距
}
.box div{
    background-color: #34ce57;
}

Combat pratique 2 : Réaliser une mise en page commune de site Web

code html :

<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

code css :

.box {
    width: 1200px;
    height: 80vh;
    display: grid; // 开启grid布局
    grid-template-rows: 10% 80% 10%;  // 设置行数
}
.header {
    background-color: #6ac13c;
    display: grid;
    /*居中*/
    align-content: center;
    justify-content: center;
}
.content {
    /*background-color: #f1b0b7;*/
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-gap: 20px;  // 网格之间的间隔
}
.footer {
    background-color: #ffc107;
    display: grid;
    align-items: center;
    justify-content: center;
}
.left {
    background-color: #5599FF;
}
.center {
    background-color: lightgreen;
}
.right {
    background-color: orchid;
}

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!