⭐️ 有关 CSS Grid布局 的学习


什么是Grid

是CSS Grid布局的一个关键属性，用于将一个元素转换为网格容器，使得其子元素可以按照网格的模式进行布局。CSS Grid布局提供了许多属性来控制网格的结构和样式。以下是一些主要的CSS Grid相关属性：


Grid相关属性

grid-template-columns

定义网格列的大小和数量。这个属性接受一系列长度值、百分比、fr单位或其他值，用来设置网格的列宽。

//固定单位的设置
grid-template-columns: 100px 33% 1fr; 

//使用auto和minmax()
grid-template-columns: auto minmax(100px, 1fr) auto;

//使用repeat()函数
grid-template-columns: repeat(3, 1fr);

//混合使用
grid-template-columns: 100px 1fr calc(50% - 20px);

grid-auto-rows

定义在没有通过 grid-template-rows 明确设置高度的情况下，隐式创建的行轨道（row tracks）的默认高度。当网格中的行没有被显式地给予高度，或自动布局中需要额外的行时，grid-auto-rows 的值就会被应用。

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

在这个例子中，如果网格容器中的内容导致需要额外的行来容纳这些内容，并且这些行没有通过 grid-template-rows 明确定义，那么每一行的高度将会自动设置为100px。

grid-auto-rows 可以接受多种单位，包括像素值、百分比、fr单位（代表可用空间的一个比例），以及一些关键词如 min-content, max-content, auto 等，来适应不同的布局需求。

  • 使用关键词 min-content 或 max-content 可以让行高根据内容的最小或最大尺寸自适应。

  • 使用 auto 会使行高根据其内容的需要自动调整。

  • 使用 fr 单位可以分配剩余空间的比例。

通过结合 grid-template-rows 和 grid-auto-rows，你可以灵活地控制网格布局中行的高度和分布，无论是预先设定的行还是动态生成的行。

grid-template-areas

通过字符串序列来描述网格模板区域的布局，每个字符串代表一行，字符串中的每个单词（用空格分隔）定义了一个单元格区域的名称。

>基本用法
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义列 */
  grid-template-rows: auto 100px auto; /* 定义行 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

在这个例子中，.container 被定义为一个3列的网格，行的高度分别自动、100px和自动。

grid-template-areas 定义了三个区域：“header”横跨前三列，“sidebar”在第二行的第一列，“main”在第二行的第二和第三列，“footer”横跨底部的三列。

>应用于网格项

为了使网格项对应到这些区域，你需要在网格项上使用 grid-area 属性:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

grid-auto-columns

定义了在没有显式设置列宽时，网格自动创建的列的宽度。

例如，如果你有一个网格，其中有两列被显式定义，但内容需要更多的列来展示，grid-auto-columns 将决定这些额外列的宽度。如果没有设置 grid-auto-columns，浏览器会根据内容自动调整宽度。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px; /* 显式定义的两列 */
  grid-auto-columns: 1fr; /* 额外列的宽度 */
}

grid-auto-rows：

置当内容需要额外行时，这些行的高度。

如果没有设置 grid-auto-rows，浏览器也会根据内容自动调整高度。

.grid-container {
  display: grid;
  grid-template-rows: 50px 100px; /* 显式定义的两行 */
  grid-auto-rows: auto; /* 额外行的高度 */
}

  • 这两个属性通常与 grid-auto-flow 属性一起使用，grid-auto-flow 控制了在隐式轨道中放置元素的方式。

  • 它们共同确保了当网格容器中的内容超出了显式定义的行和列时，网格能够适应并正确地扩展。

grid-gap

设置网格项之间的间距，包括行间距和列间距。grid-gap 接受两个值，第一个值是行间距，第二个值是列间距。如果只提供一个值，它将同时作为行间距和列间距。

.grid-container {
  display: grid;
  grid-gap: 10px; /* 同时设置行间距和列间距为10px */
  /* 或 */
  grid-gap: 10px 20px; /* 第一个值是行间距，第二个值是列间距 */
}

grid-column-gap

定义了网格容器中相邻列轨道之间的距离，不影响行轨道。

.grid-container {
  display: grid;
  grid-column-gap: 20px; /* 设置列间距为20px */
  grid-column-gap: 1rem; /* 使用相对单位设置列间距 */
}

所有网格项目之间的列间隔将被设置为20像素。这将影响所有列，无论它们是显式定义的还是隐式创建的。

grid-row-gap

定义了网格容器中相邻行轨道之间的距离，而不影响列轨道。

.grid-container {
  display: grid;
  grid-row-gap: 20px; /* 设置行间距为20px */
  grid-row-gap: 1rem; /* 使用相对单位设置行间距 */
}

grid-auto-flow

用于控制当网格容器中未被显式指定位置的网格项（未使用 grid-column 和 grid-row 或 grid-area 定位的项目），它决定了网格布局的自动布局策略。

grid-auto-flow 可以接受以下两个值：

row（默认值）：

  • 当设置为 row 时，网格项会从左到右填充每一行，然后开始新的一行。如果当前行没有足够的空间放置下一个项目，它会被放置在下一行的最左侧。

column：

  • 当设置为 column 时，网格项会从上到下填充每一列，然后开始新的一列。这使得网格项垂直流动，而不是水平流动。

.grid-container {
  display: grid;
  grid-auto-flow: row; /* 默认值，按行填充 */
  grid-auto-flow: column; /* 按列填充 */
}

grid-auto-flow 通常与 grid-template-columns 和 grid-template-rows 一起使用，来控制网格的结构和自动布局的行为。通过改变 grid-auto-flow 的值，可以实现不同的布局效果，特别是对于响应式设计和适应不同屏幕尺寸的场景。

grid-template

Grid布局中的一个综合性属性，用于一次性设置 grid-template-columns, grid-template-rows 和 grid-template-areas。这个属性可以简化代码，减少重复，并在某些情况下提高可读性。

grid-template 接受一个或多个值，这些值可以是长度、百分比、fr单位，或者是区域名称。

grid-template: <'columns'> / <'rows'> <'areas'>;

<'columns'>：定义网格的列，可以使用 repeat() 函数、长度值、百分比或fr单位。
grid-template: 100px 200px / 1fr 2fr;

<'rows'>：定义网格的行，同样可以使用 repeat() 函数、长度值、百分比或fr单位。
grid-template: 50px 100px / auto auto;

<'areas'>：定义网格的区域，通过名称来创建和连接单元格。
grid-template: "header header" "main aside" / "main main" "aside aside";

在实际应用中，grid-template 通常用于简单的布局，而对于更复杂的布局，可能需要分别使用 grid-template-columns, grid-template-rows, 和 grid-template-areas 来更好地控制网格的结构。