⭐️ 有关 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-contentmax-content 可以让行高根据内容的最小或最大尺寸自适应。

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

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

通过结合 grid-template-rowsgrid-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 来更好地控制网格的结构。