Tutoriel HTML : Comment utiliser la disposition en grille pour une mise en page gratuite-tutoriel HTML-php.cn

Tutoriel HTML : Comment utiliser la disposition en grille pour une mise en page gratuite

王林

Libérer： 2023-10-21 08:07:46

original

1115 Les gens l'ont consulté

Tutoriel HTML : Comment utiliser la disposition en grille pour une mise en page gratuite

Tutoriel HTML : Comment utiliser la mise en page en grille pour une mise en page gratuite

Dans le développement Web, la mise en page est un élément essentiel. Par rapport aux méthodes de mise en page fastidieuses du passé, la mise en page CSS Grid offre une méthode de mise en page plus flexible et intuitive.

Ce tutoriel expliquera comment utiliser la disposition en grille pour une mise en page gratuite, et permettra à chacun de mieux la comprendre et la maîtriser grâce à des exemples de code spécifiques.

1. Introduction à la disposition en grille
La disposition en grille CSS est une méthode de disposition en deux dimensions qui peut contrôler les lignes et les colonnes en même temps. Il implémente la mise en page en définissant des conteneurs de grille et des éléments de grille. Un conteneur de grille est l'élément parent qui contient les éléments de grille, et les éléments de grille sont des éléments enfants au sein du conteneur de grille.

2. Créer un conteneur de grille
Tout d'abord, nous devons créer un conteneur de grille en HTML. Vous pouvez utiliser la balise <div> comme conteneur de grille. En CSS, utilisez <code>display:grid; pour définir un élément comme conteneur de grille. <div>标签来作为网格容器。在CSS中，使用<code>display: grid;来定义一个元素为网格容器。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
        }
    </style>
</head>
<body>
    <div class="grid-container">
    </div>
</body>
</html>

Copier après la connexion

三、定义网格项
在网格容器中，我们需要定义网格项的规则。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

Copier après la connexion

在上述代码中，我们通过grid-template-columns定义了列的大小并使用空格分隔，grid-template-rows定义了行的大小并使用空格分隔，grid-gap定义了网格项之间的间隔。

四、自由布局
使用Grid布局，我们可以非常灵活地进行自由布局。可以通过设置不同的行列大小来控制网格项的布局。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .grid-item-1 {
            grid-column: 1 / 3;
            grid-row: 1;
        }
        .grid-item-2 {
            grid-column: 2 / 4;
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item grid-item-1">1</div>
        <div class="grid-item grid-item-2">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
    </div>
</body>
</html>

Copier après la connexion

在上述代码中，通过grid-column和grid-row

Exemple de code :

rrreee
3. Définir les éléments de la grille

Dans le conteneur de grille, nous devons définir les règles pour les éléments de la grille.

Exemple de code : 🎜rrreee🎜Dans le code ci-dessus, nous définissons la taille des colonnes via grid-template-columns et utilisons des espaces pour les séparer,

grid-template-rows code> définit En spécifiant la taille des lignes et en utilisant des espaces pour les séparer, <code>grid-gap

définit l'espacement entre les éléments de la grille. 🎜🎜4. Mise en page gratuite🎜Grâce à la mise en page en grille, nous pouvons réaliser une mise en page gratuite de manière très flexible. Vous pouvez contrôler la disposition des éléments de la grille en définissant différentes tailles de lignes et de colonnes. 🎜🎜Exemple de code : 🎜rrreee🎜Dans le code ci-dessus, grâce aux attributs grid-column et grid-row, nous pouvons spécifier la position de l'élément de grille dans la grille conteneur. En définissant le nombre de lignes et de colonnes aux positions de début et de fin, une présentation plus flexible peut être obtenue. 🎜🎜Résumé : 🎜Grâce à l'exemple de code ci-dessus, nous avons appris à utiliser la disposition en grille pour une mise en page gratuite. En définissant des règles pour les conteneurs de grille et les éléments de grille, nous pouvons facilement obtenir divers effets de mise en page complexes. 🎜🎜La mise en page CSS Grid est une méthode de mise en page très puissante et intuitive qui sera très utile dans le développement Web réel. Grâce à une pratique et une expérimentation continues, je pense que vous pourrez utiliser facilement la disposition en grille. J'espère que ce tutoriel pourra vous être utile, merci d'avoir lu ! 🎜