Vertieftes Verständnis von CSS Grid

Einführung

Dieses Tutorial wirft einen detaillierten Blick auf das CSS-Rasterlayout und erkundet fast alle davon Eigenschaften und Funktionen. Nachdem Sie dies gelesen haben, können Sie diese großartige Ergänzung zu CSS verwenden, um mit jedem Layout zu arbeiten.

Begriff: Gitter

Gitter ist ein zweidimensionales Gittersystem. Es können sowohl komplexe Layouts als auch kleinere Schnittstellen erstellt werden.

Attribut: Anzeige

Solange das Anzeigeattribut eines Elements auf Raster gesetzt ist, wird es zu einem Raster.

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

Dies macht .grid-to-be zu einem Grid-Container und seinen untergeordneten Grid-Elementen.

Begriff: Rasterlinien

Gitterlinien werden erstellt, wenn eine genau definierte Rasterspur verwendet wird. Sie können sie zum Platzieren von Rasterelementen verwenden.

Begriff: Rasterspuren

Eine Rasterlinie ist der Raum zwischen zwei Rasterlinien. Die Zeilen und Spalten im Raster sind Rasterspuren.

Eigenschaft: grid-template-columns

Mit der Eigenschaft „grid-template-columns“ können Sie Spalten erstellen. Um Spalten zu definieren, legen Sie die Eigenschaft „grid-template-columns“ auf die Spaltengröße in der Reihenfolge fest, in der sie im Raster angezeigt werden sollen. Werfen wir einen Blick darauf:

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

Hier sind drei Spalten mit einer Breite von 100 Pixel definiert. Alle Rasterelemente werden in diesen Spalten sortiert. Die Zeilenhöhe entspricht der Höhe des höchsten Elements in der Zeile, dies kann jedoch mit „grid-template-rows“ geändert werden.

Beachten Sie, dass, wenn nur Spalten und keine Zeilen definiert sind, Elemente die Spalten füllen und dann in den Zeilen umbrochen werden. Dies ist auf die Verwendung von Gitterlinien durch Grid und das durch Gitterlinien erzeugte implizite Gitter zurückzuführen.

Attribute: grid-template-rows

grid-template-rows wird verwendet, um die Anzahl und Größe der Zeilen im Raster zu definieren. Seine Syntax ähnelt der von Grid-Template-Columns.

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

Wenn nur die Eigenschaft „grid-template-rows“, aber keine Eigenschaft „grid-template-columns“ vorhanden ist, entspricht die Spaltenbreite der Breite des breitesten Elements in der Zeile.

Attribute: Grid-Template

Grid ist die Abkürzung für Grid-Template-rows, Grid-template-columns und Grid-template-areas.

wird wie folgt verwendet:

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

Sie können den Vorlagenbereich wie gewohnt definieren, die Breite jeder Zeile ganz rechts eingeben und schließlich die Breite aller Spalten nach dem Schrägstrich eingeben . Wie bisher können Sie alles in einer Zeile unterbringen.

Datentyp:

fr ist eine neue Einheit, die für das CSS-Rasterlayout erstellt wurde. Mit fr können Sie flexible Raster erstellen, ohne Prozentsätze berechnen zu müssen. 1fr stellt einen gleichen Anteil des verfügbaren Platzes dar. Der verfügbare Platz wird in die Gesamtzahl gleicher Teile geteilt, also teilt 3fr 4fr 3fr den Platz in 3 + 4 + 3 = 10 Teile und weist den drei Zeilen bzw. Spalten 3, 4 und 3 gleiche Teile des verfügbaren Platzes zu. Beispiel:

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

Wenn Sie feste Einheiten mit flexiblen Einheiten kombinieren, wird der verfügbare Platz für jeden gleichen Teil nach Abzug des festen Platzes berechnet. Schauen wir uns ein anderes Beispiel an:

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

Die Breite eines einzelnen gleichen Abschnitts wird wie folgt berechnet: (width of .grid - 200px) / (3 + 3) . Wenn ein Bundsteg vorhanden ist, wird dessen Platz zunächst von der Breite des .grids abgezogen. Dies ist die Differenz zwischen fr und %, d. h. der Prozentsatz beinhaltet nicht den Zwischenraum, den Sie mit „grid-gap“ definiert haben.

Hier entspricht 3fr 200px 3fr grundsätzlich 1fr 200px 1fr.

Explizite und implizite Raster

Explizite Raster sind Raster, die mit den Eigenschaften „grid-template-rows“ oder „grid-template-columns“ erstellt werden. Das implizite Raster besteht aus von Grid erstellten Rasterlinien und Rasterspuren und wird zum Speichern von Elementen außerhalb manuell erstellter Raster mit Grid-Template-*-Attributen verwendet.

Automatische Platzierung

Wenn wir ein Raster wie dieses erstellen:

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

Auch wenn wir nur die Spalten als einzelne Zellen definieren, die direkt sind Kinder des .grid werden weiterhin in Zeilen platziert. Dies liegt daran, dass das Raster automatische Platzierungsregeln enthält.

Attribut: Grid-Auto-Columns

Die Größe der Spalten, die durch die implizit erstellte Grid-Spaltenspur erstellt werden und nicht durch Grid-Template-Columns definiert sind, kann mit Grid-Template- verwendet werden. Bei der Spaltenattributdefinition ist der Standardwert auto; Sie können ihn auf den von Ihnen benötigten Wert festlegen.

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

Eigenschaften: Grid-Auto-Rows

Grid-Auto-Rows funktioniert ähnlich wie Grid-Template-Columns.

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

Attribut: Grid-Auto-Flow

Das Grid-Auto-Flow-Attribut steuert, wie Rasterzellen in das Raster fließen, und sein Standardwert ist Zeile.

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

Die „Rasterzellen“ im Raster oben werden nacheinander gefüllt, bis keine Elemente mehr übrig sind.

Zeilenbasierte Platzierung

Der Vorgang, Elemente mithilfe von Zeilennummern in einem Raster zu platzieren, wird als zeilenbasierte Platzierung bezeichnet.

Eigenschaft: Grid-Row-Start

Wenn Sie möchten, dass ein bestimmtes Rasterelement in einer bestimmten Zeile beginnt, können Sie Folgendes tun:

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

Eigenschaft: Grid-row - Ende

Wenn Sie möchten, dass ein bestimmtes Rasterelement in einer bestimmten Zeile endet, können Sie Folgendes tun:

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

Attribut: Grid-Column-Start

Wenn Sie möchten Ein bestimmtes Rasterelement beginnt in einer bestimmten Spalte. Sie können Folgendes tun:

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

Attribut: Grid-Column-End

Wenn Sie möchten, dass ein bestimmtes Rasterelement in einer bestimmten Spalte endet, Sie können dies tun:

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

Attribute: Rasterzeile und Rasterspalte

可以用 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() 之类的关键字。

Das obige ist der detaillierte Inhalt vonVertieftes Verständnis von CSS Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!