CSS 居然有比Flex更强大的布局？——Grid网格布局

最新推荐文章于 2024-09-19 17:42:53 发布

Thetimezipsby

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量1.8k

点赞数 2

分类专栏： Css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_43775179/article/details/125679905

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。

✨看到这可能还是不太懂，先看文章，体验Grid布局的强大之处✨

布局方式

传统布局方式
利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!
flex布局
有自己的一套属性, 效率高, 学习成本低, 兼容性强!
grid布局 dispaly:grid;
网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局好!

浏览器兼容性

可以看出目前流行的绝大部分浏览器基本都支持

基本概念

容器和项目

首先要了解容器和项目的关系

容器（有容器属性）
项目（有项目属性）

定义grid容器

要使 HTML 元素变成一个grid网格容器，可以将 display 属性设置为 grid 或 inline-grid。
例：display:grid | inline-grid;
grid 是块级网格，inline-grid 行内块级网格

display: grid的效果
```
div {
  display: grid;
}
```
display: inline-grid的效果
```
div {
  display: inline-grid;
}
```

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
行和列

单元格

行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

总结

阅读文章，理解此图🔝

练习代码

html

<body>
  <!-- 容器 -->
  <div class="main">
    <!-- 项目 -->
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
    <div class="item item-10">10</div>
  </div>
</body>

css

* {
  margin: 0;
  padding: 0;
}

.main {
  width: 600px;
  height: 400px;
  border: 10px solid #87ceeb;
  display: grid; /* grid网格布局 */
}

.item {
  font-size: 20px;
  color: #fff;
}

.item-1 {
  background-color: #fff000;
}

.item-2 {
  background-color: #00f000;
}

.item-3 {
  background-color: #ff00ff;
}

.item-4 {
  background-color: #397e7e;
}

.item-5 {
  background-color: #5b2990;
}

.item-6 {
  background-color: #bb3b3b;
}

.item-7 {
  background-color: #996525;
}

.item-8 {
  background-color: #9cbaad;
}

.item-9 {
  background-color: #638db6;
}

.item-10 {
  background-color: #100dbf;
}

容器属性

grid-template-columns
grid-template-rows
row-gap
column-gap
gap（3和4的简写）
grid-template-areas
grid-auto-flow
justify-items
align-items
place-items（8和9的简写）
justify-content
align-content
place-content（11和12的简写）
grid-auto-columns
grid-auto-rows

头大😲这么多，白慌，大部分功能都是一样，会用就行

属性解析

grid-template-columns、grid-template-rows

grid-template-columns 属性用于设置网格布局中的项目列数及宽度

格式：grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

属性值解析:

属性值	解析
none	默认值，不指定列的大小。
auto	列的大小由容器的大小和列中网格元素内容的大小决定。
max-content	每列的大小设置为该列中最大网格元素的大小。
min-content	每列的大小设置为该列中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。例：100px
initial	将此属性设置为默认值。
inherit	从父元素继承该属性。

例：grid-tenplate-columns: 100px 100px 100px;
表示该容器中的项目以三列排列每列100px

grid-template-rows 属性用于设置网格布局中的项目行数及高度。

格式：grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

属性值解析:

属性值	解析
none	默认值，不指定行的大小。
auto	行的大小由容器的大小和行中网格元素内容的大小决定。
max-content	每行的大小设置为该列中最大网格元素的大小。
min-content	每行的大小设置为该列中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。例：100px
initial	将此属性设置为默认值。
inherit	从父元素继承该属性。

例：grid-tenplate-rows: 100px 100px 100px;
表示该容器中的项目以三行排列每行100px

扩展》》》
如果有100列或行，该怎样做呢？要写100个值？grid提供了方法 repeat()
格式：repeat(次数 | auto-fill, 重复的值)
例：grid-tenplate-columns: repeat(3, 100px); // 表示该容器中的项目以三列排列每列100px
auto-fill：有时，项目的大小是固定的，但容器大小不确定，这个属性就会自动填充应该几列或行
fr（fraction：片段）：项目所占容器的比例，为了方便表示比例关系，网格布局提供了fr长度单位
例：grid-template-columns: repeat(3, 1fr); 也可以grid-template-columns: 1fr 1fr 1fr; // 表示该容器中的项目为3列每列占1份
minmax(最小值, 最大值) 该函数产生一个长度范围，表示长东就在这个范围之中
例：grid-template-columns: 100px minmax(100px, 1fr) 100px;
表示该容器项目有3列第1列100px 第二列最小100px最大占1份第三列100px

自己在页面上试下更容易理解

row-gap、column-gap、gap

row-gap 指定项目的行之间的间隙。

格式：row-gap: length | normal | initial | inherit;

属性值解析：

属性值	解析
length	一个指定的长度，将设置行之间的差距。例：20px
normal	默认值。指定行之间的正常间隙。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

例：row-gap: 20px; // 项目行间隙为20px
row-gap
2. column-gap 指定项目的列之间的间隙。

格式：column-gap: length | normal;

属性值解析：

属性值	解析
length	一个指定的长度，将设置列之间的差距。例：20px
normal	默认值。指定列之间的正常间隙。

例：column-gap: 20px;// 项目列间隙为20px

3. gap 用来设置网格行与列之间的间隙，该属性是row-gap、column-gap的简写形式

格式：gap: row-gap column-gap;

例：gap:20px 20px; // 行与列间隙为20px 如果行与列值相同还可简写为 gap: 20px;
gap

grid-template-areas

网格布局允许在容器中指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。由项目属性grid-area进行使用，下面会讲到

格式：grid-template-areas: none|itemnames;

属性值解析

属性值	解析
none	默认值，没有引用命名的网格。
itemnames	指定每列和每行应如何显示。定义与列行相对应的区域名。例：‘a b c’ ‘d d d’ ‘e . f’

例： grid-template-areas: ‘a b c’
‘d e f’
‘g h i’ ;
注意： a、b、c 、… 是区域名，随意起；这些区域名对应着每列每行

体验👇

.main{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面代码先划分出 9 个单元格，然后将其定名为 a 到 i 的九个区域，分别对应这九个单元格。
使用上面代码所定义的区域：使项目1网格放到 d区域 👇

.item-1 {
  background-color: #fff000;
  grid-area: d;
}

多个单元格合并成一个区域的写法如下。

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

上面代码将9个单元格分成a、b、c三个区域。

如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

grid-auto-flow

该属性指定容器中项目怎样排列

格式：grid-auto-flow: row| column | dense| row dense| column dense;

属性值解析：

属性值	解析
row	默认值。通过填充每一行来放置网格元素，在必要时增加新列。（水平排列）
column	通过填充每一列来放置网格元素，在必要时增加新列。（垂直排列）
dense	该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
row dense	按行来填充网格中前面留下的空白
column dense	按列来填充网格中前面留下的空白

例：grid-auto-flow: column; // 垂直方向上排列

justify-items、align-items、place-items

justify-items：设置项目内容的水平对齐方式（左中右）

格式：justify-items: start | end | center | stretch;

属性值解析：

属性值	解析
start	对齐单元格的起始边缘。（水平方向上）
end	对齐单元格的结束边缘。（水平方向上）
center	单元格内部居中。（水平方向上）
stretch	拉伸，占满单元格的整个宽度（默认值）。（水平方向上）

例：justify-items: start;

align-items：设置项目内容的垂直对齐方式（上中下）

格式：align-items: start | end | center | stretch;

属性值解析：

属性值	解析
start	对齐单元格的起始边缘。（垂直方向上）
end	对齐单元格的结束边缘。（垂直方向上）
center	单元格内部居中。（垂直方向上）
stretch	拉伸，占满单元格的整个宽度（默认值）。（垂直方向上）

例：align-items: start;

place-items：justify-items和align-items的简写形式
例：place-items: start end;
注意：如果省略第二个值，则浏览器认为与第一个值相等。

justify-content、align-content、place-content

justify-content：该属性是整个内容区域在容器里面的水平位置（水平方向上）

格式：justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

属性值解析：

属性值	解析
start	对齐容器的起始边框。
end	对齐容器的结束边框。
center	容器内部居中。
stretch	项目大小没有指定时，拉伸占据整个网格容器。
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

例：justify-content: start;

align-content：该属性是整个内容区域的垂直位置（垂直方向上）

格式：align-content: start | end | center | stretch | space-around | space-between | space-evenly;

属性值解析：

属性值	解析
start	对齐容器的起始边框。
end	对齐容器的结束边框。
center	容器内部居中。
stretch	项目大小没有指定时，拉伸占据整个网格容器。
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

例：align-content: start;

place-content：该属性是justify-content和align-content的简写形式
例：place-content: center center; //项目相对于容器居中对齐
注意：如果省略第二个值，则浏览器认为与第一个值相等。

grid-auto-columns、grid-auto-rows

grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，10号项目指定在第4行。

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

上面代码指定设置行列以外的网格的行高统一为60px（原始的行高为100px）。
grid-auto

项目属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column（1和2的简写形式）
grid-row（3和4的简写形式）
grid-area
justify-self
align-self
place-self（8和9的简写形式）

头大😲怎么又这么多，白慌，大部分功能还都是一样，会用就行

属性解析

grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row

grid-column-start、grid-column-end 可以理解为网格线的开始和结束位置，在这开始和结束之间就是该项目所占的位置（以列的顺序，从左往右）

格式：
grid-column-start: auto | span n | column-line;
grid-column-end: auto | span n | column-line;

属性值解析:

属性值	解析
auto	默认值，网格元素跨越一列。
span n	指定网格元素将跨越的列数。n 就是你指定的水平横跨几列数字比如：span 2 水平横跨两列
column-line	指定从哪个网格线上开始水平横跨网格元素。数字形式比如： 1 …

例：grid-column-start: 1; grid-column-end: 3; //表示水平方向上从第一根网格线横跨到第三根

也可以 grid-clumn-start: span 2; //表示该项目横占二列（从左往右）
grid-clumn-end:span 2; //表示该项目横占二列（从右往左）

grid-row-start、grid-row-end 可以理解为网格线的开始和结束位置，在这开始和结束之间就是该项目所占的位置（以行的顺序，从上往下）

格式：
grid-row-start: auto | span n | column-line;
grid-row-end: auto | span n | column-line;

属性值解析:

属性值	解析
auto	默认值，网格元素跨越一列。
span n	指定网格元素将跨越的列数。n 就是你指定的垂直横跨几列数字比如：span 2 垂直横跨两列
column-line	指定从哪个网格线上开始垂直横跨网格元素。数字形式比如： 1 …

例：grid-row-start: 1; grid-row-end: 3; //表示垂直方向上从第一根网格线横跨到第三根

grid-column 该属性是grid-column-start和grid-column-end的简写形式
例：grid-column:1 / 3; //与上图结果一致
注意：1 / 3 中的 / 符号不是除号，没有意义，只用来分隔两个参数
grid-row该属性是grid-row-start、grid-row-end的简写形式
例：grid-row: 1 / 3; //与上图结果一致

上面1，2图例解析👇
grid-row;grid-column

grid-area

grid-area属性指定项目放在哪一个区域。区域名是由grid-template-areas属性创建的

扩展》》》
grid-area 该属性还可作为grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写形式
格式：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

justify-self、align-self、place-self

justify-self、align-self 该属性单个网格中项目的水平、垂直对齐方式

格式：
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch

属性值解析：

属性值解析
start 对齐单元格的起始边缘。
end ：对齐单元格的结束边缘。
center 单元格内部居中。
stretch 拉伸，占满单元格的整个宽度（默认值）。
例：
```
.item-1  {
  justify-self: start;
}
```
place-self 该属性是justify-self和align-self属性的简写形式

格式：place-self: align-self justify-self;

例：place-self: center center;

注意：如果省略第二个值，place-self属性会认为这两个值相等。

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