Compréhension approfondie de CSS Grid

Introduction

Ce didacticiel examinera en profondeur la disposition de la grille CSS et explorera presque toutes ses propriétés et fonctionnalités. Après avoir lu ceci, vous pourrez utiliser cet excellent ajout au CSS pour travailler avec n'importe quelle mise en page.

Terme : Grille

La grille est un système de grille bidimensionnelle. Il peut être utilisé pour créer des mises en page complexes ainsi que des interfaces plus petites.

Attribut : affichage

Tant que l'attribut d'affichage d'un élément est défini sur grille, il devient une grille.

.grid-to-be {
    display: grid;
}

Cela fait de .grid-to-be un conteneur de grille et ses éléments de grille enfants.

Terme : Lignes de grille

Les lignes de grille sont créées lorsqu'une piste de grille bien définie est utilisée. Vous pouvez les utiliser pour placer des éléments de grille.

Terme : Pistes de grille

Une ligne de grille est l'espace entre deux lignes de grille. Les lignes et les colonnes de la grille sont des pistes de grille.

Propriété : grid-template-columns

Vous pouvez utiliser la propriété grid-template-columns pour créer des colonnes. Pour définir des colonnes, définissez la propriété grid-template-columns sur la taille des colonnes dans l'ordre dans lequel vous souhaitez qu'elles apparaissent dans la grille. Jetons un coup d'oeil :

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

Voici trois colonnes définies avec une largeur de 100px. Tous les éléments de la grille seront triés dans ces colonnes. La hauteur de la ligne sera égale à la hauteur de l'élément le plus haut de la ligne, mais cela peut être modifié avec grid-template-rows.

Notez que lorsque seules les colonnes sont définies et qu'aucune ligne n'est définie, les éléments rempliront les colonnes puis s'enrouleront dans les lignes. Cela est dû à l'utilisation par Grid des lignes de grille et à la grille implicite créée par les lignes de grille.

Attributs : grid-template-rows

grid-template-rows est utilisé pour définir le nombre et la taille des lignes dans la grille. Sa syntaxe est similaire à celle des colonnes de modèle de grille.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Avoir uniquement grid-template-rows mais aucune propriété grid-template-columns fera que la largeur de la colonne sera égale à la largeur de l'élément le plus large de la ligne.

Attributs : grid-template

grid est l'abréviation de grille-modèle-lignes, grille-modèle-colonnes et grille-modèle-zones.

s'utilise comme suit :

.grid {
    grid-template:
        "header    header     header"  80px
        "nav       article    article" 600px
        / 100px 1fr;
}

Vous pouvez définir la zone du modèle comme d'habitude, mettre la largeur de chaque ligne à l'extrême droite, et enfin mettre la largeur de toutes les colonnes après la barre oblique . Comme avant, vous pouvez tout mettre sur une seule ligne.

Type de données :

fr est une nouvelle unité créée pour la disposition en grille CSS. fr permet de créer des grilles flexibles sans avoir à calculer de pourcentages, 1fr représente une part égale de l'espace disponible. L'espace disponible est divisé en nombre total de parties égales, donc 3fr 4fr 3fr divise l'espace en 3 + 4 + 3 = 10 parties, allouant respectivement 3, 4 et 3 parties égales de l'espace disponible aux trois lignes ou colonnes. Par exemple :

.grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
}

Si vous mélangez des unités fixes avec des unités flexibles, l'espace disponible pour chaque portion égale est calculé après soustraction de l'espace fixe. Regardons un autre exemple :

.grid {
    display: grid;
    grid-template-columns: 3fr 200px 3fr;
}

La largeur d'une seule section égale est calculée comme ceci : (width of .grid - 200px) / (3 + 3) . Si une gouttière existe, son espace sera dans un premier temps soustrait de la largeur du .grid. Il s'agit de la différence entre fr et %, c'est-à-dire que le pourcentage n'inclut pas la gouttière que vous avez définie avec grid-gap.

Ici 3fr 200px 3fr est fondamentalement égal à 1fr 200px 1fr.

Grilles explicites et implicites

Les grilles explicites sont des grilles créées à l'aide des propriétés grille-modèle-lignes ou grille-modèle-colonnes. La grille implicite se compose de lignes de grille et de pistes de grille créées par Grid et est utilisée pour enregistrer des éléments en dehors des grilles créées manuellement avec les attributs grid-template-*.

Placement automatique

Lorsque nous créons une grille comme celle-ci :

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Même si nous définissons uniquement les colonnes, comme des cellules individuelles directes les enfants de .grid sont toujours placés en lignes. En effet, la grille contient des règles de placement automatiques.

Attribut : grid-auto-columns

La taille des colonnes créées par la piste de colonnes de grille implicitement créée qui n'est pas définie par grid-template-columns peut être utilisée avec grid-template- définition de l'attribut des colonnes, sa valeur par défaut est auto ; vous pouvez la définir sur la valeur dont vous avez besoin.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-columns: 50px;
}

Propriétés : grid-auto-rows

grid-auto-rows fonctionne de la même manière que grid-template-columns .

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-rows: 50px;
}

Attribut : grille-auto-flow

L'attribut grille-auto-flow contrôle la façon dont les cellules de la grille circulent dans la grille, et sa valeur par défaut est la ligne.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column;
}

Les "cellules" de la grille ci-dessus seront remplies une par une jusqu'à ce qu'il ne reste plus d'éléments.

Placement basé sur les lignes

L'opération consistant à placer des éléments dans une grille à l'aide de numéros de ligne est appelée placement basé sur les lignes.

Propriété : grid-row-start

Si vous souhaitez qu'un élément spécifique de la grille commence à partir d'une ligne spécifique, vous pouvez faire ceci :

.grid-item {
    grid-row-start: 3;
}

Propriété : grid-row - end

Si vous souhaitez qu'un élément spécifique de la grille se termine sur une ligne spécifique, vous pouvez faire ceci :

.grid-item {
    grid-row-end: 6;
}

Attribut : grid-column-start

Si vous le souhaitez un élément spécifique de la grille commence sur une colonne spécifique, vous pouvez faire ceci :

.grid-item {
    grid-column-start: 3;
}

Attribut : grid-column-end

Si vous souhaitez qu'un élément spécifique de la grille se termine sur une colonne spécifique, vous pouvez faire ceci :

.grid-item {
    grid-column-end: 6;
}

Attributs : grille-ligne et grille-colonne

可以用 grid-row 和 grid-column 属性来手动放置和调整网格项目的大小。每个属性都是其各自的 star 和 end 属性的简写：grid-row-start，grid-row-end，grid-column-start 和 grid-column-end。

用正斜杠 “/ ”来分隔开始和结束值：

.grid-item {
    grid-column: 3 / 5;
    grid-row: 2 / 7;
}

属性：grid-area

你可以把 grid-area 用于对网格行和网格列的简写。它是这样的：

.grid-item {
    grid-area: 2 / 3 / 7 / 5;
}

该代码的行为与上一个标题中的代码相同。

跨网格的元素

要使一个元素跨网格，可以使用 grid-row 或 grid-column 属性。设置起始行 1 和结束行 -1。此处 1 表示相关轴上最左边的网格线，-1 表示相关轴上最右边的网格线。在从右到左的书写脚本中，这是相反的，即 1 表示最右边的行，-1 表示最左边的行。

.grid-item-weird {
    grid-column: 1 / -1;
}

如果你希望单个项目占据整个网格，可以对 grid-row 和 grid-column 都这样做：

.grid-item-weird {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}

或者简单地：

.grid-item-weird {
    grid-area: 1 / 1 / -1 / -1;
}

关键字：span

当使用 grid-row 和 grid-column 时，不用显式定义行号，而是可以用 span 关键字来声明该项应涵盖的行数或列数：

.grid-item {
    grid-column: 3 / span 2;
}

你也可以把项目固定在终点线上，并朝另一个方向跨越。下面的代码实现了与上面相同的结果：

.grid-item {
    grid-column: span 2 / 5;
}
可

以用相同的方式把 span 应用在行上。

术语：网格单元

网格单元格是四个相交的网格线之间的空间，就像表格中的单元格一样。

术语：网格区域

网格区域是占据网格上一个矩形区域的网格单元。它们是用命名的网格区域或基于行的放置创建的。

属性：grid-template-areas (& grid-area)

除了用诸如 span、grid-column之类的东西放置和调整单个网格项目外，还可以用所谓的“模板区域”。grid-template-area 允许你命名网格区域，以便网格项目可以进一步填充它们。

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header     header   header"
        "sidebar-1  content  sidebar-2"
        "footer     footer   footer"
}

这里的一对引号代表一行网格。你可以将所有内容放在一行中，而不用列对齐，但是我所做的只是为了使它看起来更加整洁。我首先定义了三列三行，然后为每个单元命名。通过在第一行中重复执行三次 “header”，告诉 CSS 要做的是用名为 header 的网格项覆盖整个过程。其余的也一样。

以下是通过用 grid-template-areas 命名每个网格项目，使其拥有为其定义的空间的方式：

.header {
    grid-area: header
}
.sidebar-1 {
    grid-area: sidebar-1
}
.content {
    grid-area: content
}
.sidebar-2 {
    grid-area: sidebar-2
}
.footer {
    grid-area: footer
}

没有什么比这更容易了，尤其是用于布置内容的 CSS 其他方法。

在前面你已经看到 grid-area 也用于基于行的定位。

如果想把单元格留空，则可以用点 . 来设置：

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header header header"
        "sidebar content sidebar"
        "footer footer ."
}

在这里，页脚以第二列结束。

属性：grid-template

grid 是 grid-template-rows，grid-template-columns 和grid-template-areas 三个属性的简写。

使用方式如下所示：

.grid {
    grid-template:
        "header    header     header"  80px
        "nav       article    article" 200px
        / 100px auto;
}

可以像通常那样定义模板区域，把每行的宽度放在其最右面，然后将所有列的宽度放在正斜杠之后。像以前一样，你可以把所有得内容放在同一行。

函数：repeat()

repeat() 函数有助于使 网格轨道 列表变得不是那么多余，并为其添加了语义层。使用起来非常简单直观。我们来看一下：

你也可以重复某种形式的轨道列表，如下所示：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
}

repeat() 不必是值的唯一部分。你可以在其前后添加其他的值。例如：grid-template-columns:2fr repeat(5，1fr) 4fr;。

属性：grid

这里的 grid 是 grid-template-rows、 grid-template-columns、 grid-template-areas、 grid-auto-rows、 grid-auto-columns 和 grid-auto-flow 六个属性的简写。

首先，你可以像这样使用 grid-template（上一个示例）：

.grid {
    grid:
        "header    header     header"     80px
        "nav       article    article"    200px
        / 100px auto;
}

其次它不是你看上去的那样，grid 与 css 属性不一样：

是的，你没有看错：一个名为 css 的属性，所有 CSS 属性的简写。我也是在某次思考中偶然知道了它。但是现在我不会教你怎么用，以后有可能会。

第三，你以某种方式使用 grid。你可以将 grid-template-rows 与 grid-auto-columns 或 grid-auto-rows 结合使用。语法非常简单：

.grid-item {
    grid: <grid-template-rows> / <grid-auto-columns>; 
    grid: <grid-auto-rows> / <grid-template-columns>; 
}

例如：

.grid-item-1 {
    grid: 50px 200px 200px/ auto-flow 60px;
}
.grid-item-2 {
    grid: auto-flow 50px / repeat(5, 1fr);
}

请注意，在该值之前应该先使用 auto-flow 关键字。

术语：Gutter

Gutter 是单独分隔 网格行 和 网格列 的空间。 grid-column-gap, grid-row-gap 和 grid-gap 是用于定义 gutter 的属性。

属性：grid-row-gap

grid-row-gap 用于定义各个 网格行 之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-row-gap: 10px;
}

这会将 网格行 彼此隔开10个像素。

属性：grid-column-gap

grid-column-gap 用于定义各个 网格列 之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-column-gap: 10px;
}

这会将 网格列 彼此隔开 10 个像素。

属性：grid-gap

grid-gap 是将 grid-column-gap 和 grid-row-gap 结合在一起的简写属性。一个值定义了两个 gutter。例如：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

属性：order

可以用 order 属性来控制网格单元的顺序。看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}
.grid .grid-cell:nth-child(5) {
    order: 1;
}

在代码中，第五个网格单元被放置在网格的最后，因为其他网格单元根本没有定义顺序。如果定义了顺序，则会遵循数字顺序。两个或多个 网格单元 可以有相同的顺序。具有相同顺序或完全没有顺序的文件将会根据 HTML 文档的逻辑顺序进行放置。再看下面：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}
.grid .grid-cell {
    order: 1
}
.grid .grid-cell:nth-child(5) {
    order: 2;
}

上面的例子产生的结果与前面的例子相同。

函数：minmax()

maxmax() 函数是 CSS 网格布局的新增功能。此功能为我们提供了指定 网格轨道 的最小和最大尺寸的方法。

看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 1fr minmax(50px, 100px) 1fr;
}

使用上面的代码，在减小窗口宽度时，中间列将保持 100px 的宽度，直到第一列和最后一列减小到其内容的宽度为止。这对于制作响应式布局特别有用。

关键字：auto

如果父容器的尺寸是固定的（例如固定宽度），则 auto 关键字作为网格项目的宽度将会使该项目充满容器的整个宽度。在有多个项目的情况下，就像 fr 那样划分空间。但是如果将 auto 与 fr 一起使用，则 auto 表现为该项目内容的宽度，剩余的可用空间被划分为 fr。

函数：fitcontent()

当你希望宽度或高度表现得像 auto 一样，但又希望受到最大宽度或高度约束时，可以用 fitcontent() 函数.

.grid-item {
    width: fitcontent(200px);
}

在这里，最小为适合内容，最大为 200px。

关键字：auto-fill

你可以用 auto-fill 来用最多的 网格轨道 填充相关的轴（行或列）而不会溢出。要实现这个目的，需要用到 repeat() 函数：

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px);
}

但这会降低单个轨道的灵活性。通过与 minmax() 一起使用，可以同时具有自动填充功能和灵活性。

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

这样，你可以至少包含一列，并且在特定浏览器宽度中包含多个 50px 的列。

请注意，即使可能未用单元格填充，auto-fill 也会创建网格轨道。

auto-fit

auto-fit 的行为与 auto-fill 相同，不同之处在于它会折叠所有空的重复轨道。空轨道是指没有放置网格项目或跨越网格项目的轨道。

dense

借助 dense 关键字，你可以将项目回填到 空网格单元 中，这些单元是因为你尝试做了一些的奇怪的事（例如spanning）而被创建的。在任何 span 内你都可以将 dense 关键字与 grid-auto-flow 配合使用，如下所示：

.grid {
    display: grid;
    grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
    grid-auto-flow: dense;
}

你可以把它用在照片库之类的页面中，但在用于表单时要特别小心，因为这可能会打乱表单子元素的特定顺序。

浏览器支持

在撰写本文时，浏览器对 CSS 网格布局有很好的支持。根据 caniuse.com 的说法，除了 Internet Explorer 11部分支持 -ms 前缀和 Opera Mini 之外，所有主流浏览器均支持 CSS 网格布局。

总结

与以前的方法相比，CSS 网格使我们能够以更高的控制力、便捷性和速度来进行布局。在本教程中，我们学习了 Grid 的所有主要元素，包括创建轨道、定位和调整单元格的大小，以及使网格流畅和响应，以及使用诸如 auto-fill 和 minmax() 之类的关键字。

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!