Grid网格布局入门

最新推荐文章于 2025-06-25 16:24:16 发布

Neil-

最新推荐文章于 2025-06-25 16:24:16 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 css 文章标签： Grid网格布局 auto-fill与auto-fit max-content与min-conten 容器属性与项目属性 align-items/justify-content

本文链接：https://blog.youkuaiyun.com/luofeng457/article/details/90444493

web前端同时被 2 个专栏收录

98 篇文章

订阅专栏

css

13 篇文章

订阅专栏

本文介绍了Grid网格布局，它与Flex布局有相似概念，还引入了网格线和单元格。详细讲解了容器属性，如display、grid-template-columns等，包括repeat、auto-fill等参数，对比了auto-fill与auto-fit、max-content与min-content。也介绍了项目属性，如指定起止位置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

grid布局和Flex布局有一些相似，其中的一些概念也是相通的；比如容器与项目的概念；容器指的是整个grid布局块的包裹元素，在容器层设置display：grid或者display: inline-grid；项目则是指容器内的最顶层元素；当然，除了flex的容器和项目的概念，grid还引入了网格线和单元格的概念，不管水平方向，网格线总比单元格数多1，并且可以指定每条网格线的名称；

容器属性

display：可选的值有grid及inline-grid

.container {
  display: grid | inline-grid;
}

grid-template-columns/ grid-template-rows：
定义容器中的每个项目（单元格）的宽高及网格线名称，可以接受的参数包括可选的网格线名称及网格宽高；尺寸可以是固定值，也可以是相对值；

.container {
	display: grid;
	grid-template-columns: 1fr minmax(100px, 1fr) 1fr;
	grid-template-rows: 100px 100px auto;
	grid-template-rows: [a] 100px [b] 100px [3] auto [end];
	
}

(1) repeat(count, target)：用于重复某个值多次，避免不必要的重复书写；第二个参数接受长度、百分比、flex属性（max-content、min-content、auto、auto-fill、auto-fit）；
(2) auto-fill：单元格宽度固定而容器宽度可变时可以使用该属性进行自动填充，与repeat搭配使用；
(3) fr：grid布局中用于标识相互大小关系的量；
(4) minmax(min, max)：可以为某个项目的宽或高进行最小值和最大值的限制；
(5) auto：与flex中的auto类似，自动填充剩余空间；
(6) fit-content(value)：计算方式为min(maximum size, max(minimum size, value))，其中max-size由max-content定义，minimum size的计算由auto决定；参见demo

// repeat
.container {
	grid-template-columns: repeat(3, 100px);
	grid-template-columns: repeat(2, 100px) 100px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(4, 25%);
	grid-template-columns: repeat(2, 1fr 2fr) 100px;	// 模式匹配
	grid-template-columns: repeat(2, [col-start] 1fr [col-end]) 2fr;
	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(3, minmax(100px, 1fr));
	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(3, auto);	// 与上一个等价
	grid-template-columns: repeat(3, max-content);		// 具体见下文
	grid-template-columns: repeat(3, min-content);		// 具体见下文
	grid-template-columns: repeat(auto-fill, 100px);	// 容器宽度不定，由定长的项目填充, 可参见https://jsfiddle.net/wc15vf6m/
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-template-columns: repeat(auto-fit, 3);			// 
}

auto-fill与auto-fit比较：
（1）auto-fill：

如果容器在该方向上具有有限或最大尺寸，那么重复次数是使网格布局不溢出的最大正整数；否则如果任意重复次数均会导致溢出，那么重复次数为1；否则如果容器有一个有限的最小尺寸，那么重复次数将是满足最小值要求的最小正整数；

（2）auto-fit：

一般情况下与auto-fill保持一致，知道多出来的空白空间足够容纳下新的列并且不会导致溢出；此时auto-fit更倾向于将已有的列扩大相同的倍数，而不是像auto-fill一样增加许多不可见的列；这其实与flex中的一些属性也是相通的（shrink、grow）；两者的grow属性不同而已；

demo中的容器宽度为100%，是一个有限宽度，因此，总是会取使项目不溢出的最大正整数；网格宽度为100px，项目数为6，当容器宽度大于600多像素时就可以看到两者的表现差异性了；auto-fill在保证不溢出及不低于项目最小宽度的情况下添加了许多不可见的列，而auto-fit使用这些列等比放大去填充整个多出来的空白空间；
max-content与min-content：
max-content与min-content与对项目内容的处理存在差异，这与width: max-content | min-content具有相似性；max-content表示所有子元素中的宽度最大值；min-coontent表示采用所有子元素中的最小宽度的最大值；查看demo和demo2的差异；
grid-template-areas：grid-template-columns和grid-template-rows只是对容器进行单元格划分，这样和flex有些相近，但是grid-template-areas则为grid更大赋能，从而让其可以满足各种丰富的布局需求；该属性为每个单元格命名，然后在区域中使用grid-area属性指定该区域对应的单元格，从而可以实现单元格的多种组合效果

区域命名后对应的水平和垂直方向网格线会被自动命名，起始和终止位置分别为areaName-start，areaName-end；

具体可以参见demo
```
#container {
  display: grid;
  width: 100%;
  height: 300px;
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: minmax(100px, 1fr) 5fr;
  grid-template-areas: "head head"
                       "nav main"
                       "nav footer";
  text-align: center;
                  
}
header {
  grid-area: head;
  background: #bfbfbf;
}
nav {
  grid-area: nav;
  background: orange;
}
....
```

grid-template：是grid-template-columns、grid-template-rows及grid-template-areas的缩写；上面网页布局的css使用缩写为：

#container {
  display: grid;
  width: 100%;
  height: 300px;
  grid-template: "head  head" 50px
                 "nav   main" 1fr
                 "nav footer" 30px / minmax(100px, 1fr) 5fr;
  text-align: center;
                  
}
header {
  grid-area: head;
  background: #bfbfbf;
}
nav {
  grid-area: nav;
  background: orange;
}
main {
  grid-area: main;
  background: lightblue;
}
footer {
  grid-area: footer;
  background: yellow;
}

grid-row-gap、grid-column-gap及grid-gap：表示项目（单元格）间的行间距、列间距及间距（行间距 | 列间距）；
grid-auto-column、grid-auto-row及grid-auto-flow：表示行或列自动排列的方式，支持长度、百分比及flex值；grid-auto-flow控制项目的自动排列方式，支持四个值——row、column、row dense、column dense；
justify-content、align-items及place-content：表示所有项目相对于容器的布局方式；justify-content表示水平布局、align-items为垂直方向布局、place-content为两者的简写；前两者取值可以为start、end、center、stretch；
grid：是六个属性的集合——grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow；

项目属性

grid-row-start/grid-row-end/grid-column-start/grid-column-end：
用于指定项目的起止位置，具体参见demo
grid-row、grid-column为上边属性的缩写：不过另加了一个关键字span，可以用于表示跨过了多少个网格线，下面两种写法是等价的
```
grid-row: 1 / 4;
grid-row: 1 / span 2;
```
grid-area：上面已经提到过，表示该项目属于哪个区域；另外该属性还可以这样使用：grid-area: <row-start> / <column-start> / <row-end> / <column-end>以直接指定项目位置;
```
.item.item-1 {
	/* grid-column-start: 2;
	grid-row: 2 / span 2; */
 	grid-area: 2/2/4/3;	// 与上边两句的效果等价
}
```
justify-self/align-self/place-self：用于控制单个项目自身的内容的水平和垂直居中，可取的值有：start/end/center/stretch；place-self为简写；