CSS 그리드에 대한 심층적인 이해

소개

이 튜토리얼에서는 CSS 그리드 레이아웃에 대해 자세히 알아보고 거의 모든 속성과 기능을 탐색합니다. 이 글을 읽고 나면 CSS에 대한 이 훌륭한 추가 기능을 사용하여 모든 레이아웃에서 작업할 수 있습니다.

용어: 그리드

그리드는 2차원 그리드 시스템입니다. 복잡한 레이아웃은 물론 더 작은 인터페이스를 구축하는 데 사용할 수 있습니다.

속성: display

요소의 표시 속성을 그리드로 설정하기만 하면 그리드가 됩니다.

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

이것은 .grid-to-be를 그리드 컨테이너와 그 하위 그리드 항목으로 만듭니다.

용어: 그리드 라인

그리드 라인은 잘 정의된 그리드 트랙을 사용할 때 생성됩니다. 이를 사용하여 그리드 항목을 배치할 수 있습니다.

용어: 그리드 트랙

그리드 라인은 두 그리드 라인 사이의 공간입니다. 그리드의 행과 열은 그리드 트랙입니다.

속성: Grid-template-columns

Grid-template-columns 속성을 사용하여 열을 생성할 수 있습니다. 열을 정의하려면 그리드에 표시하려는 순서대로 Grid-template-columns 속성을 열 크기로 설정합니다. 살펴보겠습니다:

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

여기에는 너비가 100px인 세 개의 열이 정의되어 있습니다. 모든 그리드 항목은 이 열에 정렬됩니다. 행 높이는 행에서 가장 높은 요소의 높이와 동일하지만 그리드 템플릿 행을 사용하여 변경할 수 있습니다.

행이 아닌 열만 정의하는 경우 요소가 열을 채운 다음 행을 둘러쌉니다. 이는 그리드가 그리드 선을 사용하고 그리드 선에 의해 생성된 암시적 그리드 때문입니다.

속성: Grid-template-rows

grid-template-rows는 그리드의 행 수와 크기를 정의하는 데 사용됩니다. 구문은 그리드 템플릿 열과 유사합니다.

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

그리드 템플릿 열 없이 그리드 템플릿 행만 있으면 열 너비가 행에서 가장 넓은 요소의 너비와 같아집니다.

속성: 그리드-템플릿

그리드는 그리드-템플릿-행, 그리드-템플릿-열 및 그리드-템플릿-영역의 약어입니다.

사용 방법은 다음과 같습니다.

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

평소와 같이 템플릿 영역을 정의하고 각 행의 너비를 가장 오른쪽에 배치한 다음 마지막으로 슬래시 뒤에 모든 열의 너비를 배치할 수 있습니다. 이전과 마찬가지로 모든 것을 한 줄에 넣을 수 있습니다.

데이터 유형:

fr은 CSS 그리드 레이아웃을 위해 생성된 새로운 단위입니다. fr을 사용하면 백분율을 계산하지 않고도 유연한 그리드를 만들 수 있으며, 1fr은 사용 가능한 공간의 동일한 부분을 나타냅니다. 사용 가능한 공간은 동일한 부분의 총 개수로 나누어지므로 3fr 4fr 3fr은 공간을 3 + 4 + 3 = 10개의 부분으로 나누어 사용 가능한 공간의 3, 4, 3개의 동일한 부분을 각각 3개의 행 또는 열에 할당합니다. 예:

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

고정 단위와 가변 단위를 혼합하는 경우 각 동일한 부분에 사용 가능한 공간은 고정 공간을 뺀 후 계산됩니다. 또 다른 예를 살펴보겠습니다.

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

단일 동일 섹션의 너비는 (width of .grid - 200px) / (3 + 3) 과 같이 계산됩니다. 거터가 있는 경우 해당 공간은 처음에 .grid의 너비에서 차감됩니다. 이는 fr과 %의 차이입니다. 즉, 백분율에는 Grid-Gap으로 정의한 배수구가 포함되지 않습니다.

여기서 3fr 200px 3fr은 기본적으로 1fr 200px 1fr과 같습니다.

명시적 및 암시적 그리드

명시적 그리드는 그리드-템플릿-행 또는 그리드-템플릿-열 속성을 사용하여 생성된 그리드입니다. 암시적 그리드는 그리드에 의해 생성된 그리드 라인과 그리드 트랙으로 구성되며, 그리드-템플릿-* 속성을 사용하여 수동으로 생성된 그리드 외부에 항목을 저장하는 데 사용됩니다.

자동 배치

다음과 같이 그리드를 만들 때:

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

열만 정의하더라도 .grid의 직계 하위 항목인 개별 셀은 여전히 ​​행에 배치됩니다. 이는 그리드에 자동 배치 규칙이 포함되어 있기 때문입니다.

속성: Grid-auto-columns

grid-template-columns에 의해 정의되지 않은 암시적으로 생성된 그리드 열 트랙에 의해 생성된 열의 크기는 Grid-template-columns 속성으로 정의할 수 있습니다. 자동; 필요한 값으로 설정할 수 있습니다.

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

속성: Grid-auto-rows

grid-auto-rows는 Grid-template-columns와 유사하게 작동합니다.

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

속성: Grid-auto-flow

grid-auto-flow 속성은 그리드 셀이 그리드로 흐르는 방식을 제어하며 기본값은 행입니다.

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

위 그리드의 "그리드 셀"은 남은 항목이 없을 때까지 하나씩 채워집니다.

행 기반 배치

행 번호를 사용하여 그리드에 항목을 배치하는 작업을 행 기반 배치라고 합니다.

속성: Grid-row-start

특정 그리드 항목을 특정 행에서 시작하려면 다음과 같이 하면 됩니다.

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

속성: Grid-row-end

특정 그리드 항목을 시작하려는 경우 특정 그리드 항목이 특정 열에서 시작되도록 하려면 다음과 같이 하면 됩니다.

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

속성: Grid-column-end

특정 그리드 항목이 특정 열에서 끝나도록 하려면 다음과 같이 하면 됩니다.

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

속성: 그리드 행 및 그리드 열

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

위 내용은 CSS 그리드에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!