Grid 布局

文章目录

容器属性
- display 属性
- grid-template-columns 和 grid-template-rows 属性
- row-gap、column-gap、gap 属性
- grid-template-areas 属性
- grid-auto-flow 属性
- justify-items、align-items、place-items 属性
- justify-content、align-content、place-content 属性
- grid-auto-columns、grid-auto-rows 属性
项目属性
- grid-column-start、grid-column-end、grid-row-start、grid-row-end 属性
- grid-area 属性
- justify-self、align-self、place-self 属性
Grid 实战
- fr 实现等分响应式
- repeat + auto-fit——固定列宽，改变列数量
- repeat+auto-fit+minmax 去掉右侧空白
- repeat+auto-fit+minmax-span-dense 解决空缺问题
网友评价

Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。
这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。

容器属性

display 属性

通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。

display：grid ：该容器是一个块级元素
display: inline-grid ：容器元素为行内元素

<div class="wrapper">
    <div class="one item">One</div>
    <div class="two item">Two</div>
    <div class="three item">Three</div>
    <div class="four item">Four</div>
    <div class="five item">Five</div>
    <div class="six item">Six</div>
</div>

<style>
    .wrapper {
        display: grid;
    }
</style>

grid-template-columns 和 grid-template-rows 属性

grid-template-columns ：设置列宽
grid-template-rows ：设置行高

.wrapper {
    display: grid;
  	gap: 5px;
    /*  声明了三列，宽度分别为 200px 100px 200px */
    grid-template-columns: 200px 100px 200px;
    /*  声明了两行，行高分别为 50px 50px  */
    grid-template-rows: 50px 50px;
}

在这里插入图片描述

repeat()
可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的
```
.wrapper {
  display: grid;
  gap: 5px;
  grid-template-columns: 200px 100px 200px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
```

auto-fill
表示自动填充，多少列(行)自适应，让一行（或者一列）中尽可能的容纳更多的单元格。

grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：
```
.wrapper-2 {
  display: grid;
  gap: 5px;
  /*  列宽200px  多少列自适应 */
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 50px 50px;
}
```
.
fr
fr 单位代表网格容器中可用空间的一等份。
grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：
```
.wrapper {
  display: grid;
  gap: 5px;
  /*  第一个列宽设置为 200px，后面列宽分别为剩余宽度的 1/3 和 2/3  */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 50px 50px;
}
```
.
minmax()
minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。

它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：
```
.wrapper {
  display: grid;
  gap: 5px;
  /*  第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍  */
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-template-rows: 50px 50px;
}
```
.
auto
通过 auto 关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：
```
.wrapper {
  display: grid;
  gap: 5px;
  /*  第一第三列为 100px，中间自适应  */
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 50px 50px;
}
```

row-gap、column-gap、gap 属性

row-gap：设置行间距
column-gap ：设置列间距
gap：是两者的简写形式

grid-row-gap、grid-column-gap、grid-gap 属性已被废弃，建议使用新的、未被废弃的属性row-gap、column-gap、gap。

这些属性是在CSS Grid规范拟定早期加入的，用于设置网格布局中行与行之间、列与列之间以及行和列之间的间距。然而，随着gap属性在CSS3新特性中的普及，这些旧的grid-*属性被逐渐废弃。

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  /*  行间距是10px  */
  row-gap: 10px;
  /*  列间距是20px  */
  column-gap: 20px;
  /* 简写： 行间距是10px  列间距是20px */
  gap: 10px 20px;
}

在这里插入图片描述

grid-template-areas 属性

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。
grid-area 属性指定项目放在哪一个区域

.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

header元素会占据第一行的两个连续区域，aside元素会占据第二行的第一个区域，而两个content 元素会占据第二行的后两个区域。
在这里插入图片描述

grid-auto-flow 属性

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

grid-auto-flow: row：放置顺序是"先行后列"，即先填满第一行，再开始放入第二行（默认值是 row）

.wrapper {
  display: grid;
  gap: 5px;
  grid-template-columns: 100px 200px 100px;
  grid-auto-rows: 50px;
  grid-auto-flow: row;
}

在这里插入图片描述

grid-auto-flow: column：放置顺序是"先列后行"，即先填满第一列，再开始放入第二列

.wrapper {
    display: grid;
    gap: 5px;
    grid-auto-columns: 100px;
    grid-template-rows: 50px 50px;
    grid-auto-flow: column;
}

在这里插入图片描述

justify-items、align-items、place-items 属性

作用的是每个单元格item

justify-items：每个单元格的水平位置（左中右）
align-items：每个单元格的垂直位置（上中下）
place-items：是两者的简写形式

.wrapper {
    display: grid;
    gap: 5px;
    grid-template-columns: 100px 200px 100px;
    grid-auto-rows: 50px;
    justify-items: start;
}

它们都有四个值：start | end | center | stretch

stretch：拉伸，占满单元格的整个宽度（默认值）

在这里插入图片描述

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中

justify-content、align-content、place-content 属性

作用的是整个内容区域content

justify-content：是整个内容区域在容器里面的水平位置（左中右）
align-content：是整个内容区域在容器里面的垂直位置（上中下）

.wrapper {
    display: grid;
    gap: 5px;
    grid-template-columns: 100px 200px 100px;
    grid-auto-rows: 50px;
    justify-content: start;
}

start：对齐容器的起始边框
end：对齐容器的结束边框
center：容器内部居中

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch：项目大小没有指定时，拉伸占据整个网格容器

grid-auto-columns、grid-auto-rows 属性

仅影响那些未明确设置大小的列(行)

grid-auto-columns：设置网格容器中列的默认大小
grid-auto-rows：设置网格容器中行的默认大小

该属性的语法允许使用多种值：

auto：默认值，由容器的大小决定列的尺寸
max-content：根据列中最大的网格元素设置每列的大小
min-content：根据列中最小的网格元素设置每列的大小
length：使用自定义的长度值设置列的大小

.wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: 200px 100px;
    /*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
    grid-template-rows: 100px 100px;
    grid-auto-rows: 50px;
}

显式网格：这里grid-template-columns 和 grid-template-rows 属性只是指定了两行两列，也就是4个元素的显式网格。
隐式网格：但实际有九个元素，剩下的4个元素就是隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px

如下图所示：
在这里插入图片描述

在早期的CSS Grid规范中，当网格容器的内容超出了显式定义的网格线时，会创建隐式网格。

然而，隐式网格的某些行为可能会导致布局的不确定性，因此现在更推荐使用显式定义网格线的方式来避免这些问题。

项目属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end 属性

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  /*   如果有重叠，就使用 z-index */
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}

上面代码中：.two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。其中它跟 .three （垂直网格线是从3 到 4，水平网格线是从 1 到 4）是有冲突的。可以设置 z-index 去决定它们的层级关系

grid-area 属性

grid-area 属性指定项目放在哪一个区域，与上面的 grid-template-areas类似

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

.wrapper {
  margin: 50px;
  display: grid;
  gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

在这里插入图片描述

justify-self、align-self、place-self 属性

与justify-items、align-items、place-items属性的用法完全一致，但只作用于单个项目

justify-self：设置单元格内容的水平位置（左中右）
align-self：设置单元格内容的垂直位置（上中下）
place-self：是两者的简写形式

它们有同样的四个值：start | end | center | stretch

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}

stretch：拉伸，占满单元格的整个宽度（默认值）
start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中

Grid 实战

fr 实现等分响应式

fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。

grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

.wrapper {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px;
}

在这里插入图片描述

等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现：flex: 1，

repeat + auto-fit——固定列宽，改变列数量

网格能够固定列宽，并根据容器的宽度来改变列的数量。

这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。

grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：

.wrapper {
  display: grid;
  gap: 10px 20px;
  /* 固定列宽为 200px，数量是自适应的 */
  grid-template-columns: repeat(auto-fit, 200px);
  grid-auto-rows: 50px;
}

在这里插入图片描述

repeat+auto-fit+minmax 去掉右侧空白

上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。

minmax() 函数就帮助我们做到了这点。

将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示每列的数量是自适应的；列宽至少是200px，如果还有空余则一起等分。

.wrapper {
  display: grid;
  gap: 10px 20px;
  /* 每列的数量是自适应的；列宽至少是200px，如果还有空余则一起等分 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px;
}

在这里插入图片描述

repeat+auto-fit+minmax-span-dense 解决空缺问题

如果每个网格元素的长度不相同，则通过 span 关键字进行设置网格项目的跨度

grid-column-start: span 3，表示这个网格项目跨度为 3。

.four {
  grid-column-start: span 3;
}

在这里插入图片描述
怎么右侧又有空白了？原来是有一些长度太长了，放不下。

这个时候就到我们的 dense 关键字 出场了。

grid-auto-flow: row dense 表示尽可能填充，而不留空白

.wrapper {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px;
  grid-auto-flow: row dense;
}