devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css【详解】grid布局—— 网格布局（栅格布局）_css grid

作者：菜鸟追梦旅行 | 2024-03-23 13:59:18

赞

踩

css grid

网格布局（Grid）是最强大的 CSS 布局方案

grid布局 和 flex布局的区别

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid 布局的基本术语

  • 容器——采用网格布局的区域
  • 项目——容器内采用网格定位的子元素（项目只能是容器的顶层子元素，不包含项目的子元素，如下方代码的<p>元素就不是项目。Grid 布局只对项目生效。）
  1. <div>
  2.   <div><p>1</p></div>
  3.   <div><p>2</p></div>
  4.   <div><p>3</p></div>
  5. </div>

上面代码中，最外层的<div>元素是容器，内层的三个<div>元素是项目。

Grid 布局的使用方法

启用网格布局 display: grid

块级容器（宽度撑满整行）时

display: grid;

行内容器（宽度随内容自适应）时

display: inline-grid;

使用网格布局后，项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

划分列 grid-template-columns

绝对值 px

在容器内划分出3列，每列宽度为100px

grid-template-columns: 100px 100px 100px;

百分比值 %

将容器等分为3列，每列宽度为容器总宽度/3

grid-template-columns: 33.33% 33.33% 33.33%;

比例值 fr

将容器划分为2列，第1列的宽度 ：第2列的宽度 =  1:2

 grid-template-columns: 1fr 2fr;

 fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用

grid-template-columns: 150px 1fr 2fr;

第一列的宽度为150像素，第二列的宽度是第三列的一半 

  • 如果所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。

  • 如果所有fr值之和小于1，最终的尺寸是可自动分配尺寸和fr值的乘法计算值。

和auto关键字混合使用

 fr值的可自动分配尺寸是容器尺寸减去设置auto关键字的列的fit-content尺寸。在本例中，由于设置auto关键字的这一列里面内容比较少，fit-content尺寸就是这几个字符的宽度尺寸，因此，最终的尺寸表现就是最后3列按照1:1:1的比例平分了容器尺寸减去“宽度auto”这几个字符的宽度得到的尺寸。

minmax()函数值

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

repeat()函数值

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。

grid-template-columns: repeat(3, 33.33%);

或 

grid-template-columns: repeat(2, 100px 20px 80px);

上方代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

无法确定列数时，重复次数使用关键字：auto-fill 或 auto-fit

  1. .container {
  2.     grid-template-columns: repeat(auto-fill, 100px);
  3. }
  4. .container {
  5.     grid-template-columns: repeat(auto-fit, 100px);
  6. }

 关键字往往会和其他网格布局函数一起使用，例如minmax()函数

  1. .container {
  2.     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  3. }

这就实现了无论grid容器多宽，grid子项都会等比例充满grid容器（因为设置了1fr），同时保证宽度不小于100px，网格布局的列数自动计算分配的智能弹性布局效果。

使用auto-fill关键字自动填充的时候，repeat()函数不能和auto一起使用的，但可以与长度值和百分比值一起使用。

  1. .container {
  2.     /* 有效 -- 每一行的最后一列的宽度都会是容器的20%大小 */
  3.     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))20%;
  4. }

使用auto-fit关键字实现的布局效果要比auto-fill关键字实现的更符合常规的布局需求，效果见

repeat()函数auto-fit关键字效果 » CSS新世界demo演示

fit-content()函数

让尺寸适应于内容，但不超过设定的尺寸，常用于希望grid子项的宽度随着内容变化，但是又不希望宽度太大的场景。

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: fit-content(100px) fit-content(100px) 40px auto;
  4. }

fit-content()函数只支持数值和百分比值，fr值是不合法的。

min-content

最小内容尺寸中最大的那个最小内容尺寸值。网格布局中的同一行grid子项的高度和同一列grid子项的宽度都是一致的，因此min-content指的并不是某一个格子的最小内容尺寸，而是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值。

max-content

max-content关键字和min-content关键字类似，只是最终的尺寸是最大内容宽度中最大的那一个值。

auto

由浏览器自己决定长度

尺寸的上限是最大内容尺寸的最大值，但是不同于max-content关键字，max-content关键字的尺寸是固定的，这里的尺寸是会受到justify-content属性和align-content属性影响的。计算规则有些复杂，了解即可。

grid-template-columns: 100px auto 100px;

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

划分行 grid-template-rows

 使用方法与列相同

  1. grid-template-rows: 100px 100px 100px;
  2. 或
  3. grid-template-rows: 33.33% 33.33% 33.33%;

范例

  1. .container {
  2.     grid-template-columns: 80px auto 100px;
  3.     grid-template-rows: 25% 100px auto 60px;
  4. }

 

自动填充 auto-fill

单元格大小固定，但容器大小不确定时，如果希望每一行（或每一列）容纳尽可能多的单元格，可以使用auto-fill关键字进行自动填充。

grid-template-columns: repeat(auto-fill, 100px);

每列宽度100px，然后自动填充，直到容器不能放置更多的列。

给网格线命名 []

在grid-template-columns属性和grid-template-rows属性中，使用方括号指定每一根网格线的名字，方便以后的引用。

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  4.   grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
  5. }

上面代码指定网格布局为3行 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

由于网格的中间区域的网格线是由两边格子公用的，因此，可以给网格线起两个名称（使用空格分隔），分别表示网格线的两侧。

  1. .container {
  2.     grid-template-columns: [广告区-左] 120px [广告区-右 内容区-左] 600px [内容区-右];
  3. }

设置行/列的间距

设置行间距 row-gap

row-gap: 20px;

支持数值和百分比值

设置列间距 column-gap

column-gap: 30px;

支持数值和百分比值

gap

是column-gap和row-gap合并的简写形式

gap: 20px 30px;

如果gap省略了第二个值，浏览器认为第二个值等于第一个值。

支持数值和百分比值和calc()函数

 指定区域 grid-template-areas

可以将网格布局中的某个单元格或多个单元格定义为一个区域

网格区域一定要形成规整的矩形区域，无论是L形，还是凹的或凸的形状都会认为是无效的属性值。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px 100px;
  4.   grid-template-rows: 100px 100px 100px;
  5.   grid-template-areas: 'a b c'
  6.                        'd e f'
  7.                        'g h i';
  8. }

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

实战范例见  grid-template-areas与土地区域划分 » CSS新世界demo演示

不属于任何区域的单元格，用.表示

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

多个单元格合并成一个区域

  1. grid-template-areas: "header header header"
  2.                      "main main sidebar"
  3.                      "footer footer footer";

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

改变网格布局的布局顺序 grid-auto-flow

默认的grid-auto-flow: row效果是

修改设置，设为row dense后

如果将设置改为column dense，表示"先列后行"，并且尽量填满空格，则效果如下

dense

表示网格的自然排列启用“密集”打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑。 

举个通俗的例子，村里9户人家，每一户都分得了一块田地，大家的田地都是紧密相连的。孤寡老人李大爷和王大爷相继去世，于是就有两块田地是空的，因为有空缺，所以这个时候，如果我们使用无人机从田地上方拍一个照片，就会看到照片中的田地是稀疏的，不是紧密的。这个时候，村里又来了两户新人家，也要分田地。如果使用dense属性值，则优先分配之前李大爷和王大爷留下的空缺的土地，因为这样会让整片田地没有空缺，让田地是“密集的”（“紧密的”）。

范例：

 

设置单元格内的对齐方式

 justify-items

指定单元格内容的水平对齐方式，属性值有：

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

align-items

指定单元格内容的垂直对齐方式，属性值有：

  • normal：【默认值】会根据使用场景的不同表现为stretch或者start。
  • stretch：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • baseline：基线对齐（align-items属性特有属性值）

效果见 justify-items/align-items属性值样式表现 » CSS新世界demo演示

在绝大多数场景下normal的表现和stretch的表现是一模一样的，但是如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现。最典型的具有内在尺寸和比例的元素就是img图片元素。

 grid子项是两个替换元素，一个替换元素是图片，具有内在的尺寸和比例；另一个替换元素是按钮，没有内在尺寸和比例。结果垂直方向的对齐表现如图6-111所示，图片的表现与start的表现一样，位置居顶且没有拉伸，而按钮的表现与stretch的表现一样，在垂直方向上完全被拉伸了。

对比效果见 align-items默认值图片和按钮的样式表现 » CSS新世界demo演示

place-items

是align-items属性和justify-items属性的合并简写形式。

place-items: start end;

 如果省略第二个值，则浏览器认为与第一个值相等。

IE浏览器和Edge浏览器都不支持place-items属性。如果不考虑浏览器的兼容性，在CSS中实现垂直居中对齐效果的最佳方法就是使用place-items属性：

  1. .container {
  2.     display: grid;
  3.     place-items: center;
  4. }

justify-self

跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self

跟align-items属性的用法完全一致，也是只作用于单个项目。

place-self

是align-self属性和justify-self属性的合并简写形式。

place-self: center center;

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

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

设置容器内的对齐方式

justify-content

是整个内容区域在容器里面的水平位置（左中右）

align-content

是整个内容区域的垂直位置（上中下）。

要想justify-content属性和align-content属性起作用，就需要让grid子项的总尺寸小于grid容器的尺寸。要么给gird子项设置较小的具体的尺寸值，要么让gird子项的尺寸是auto，同时保证内容尺寸较小。

都可以取下面这些值：

  • normal【默认值】效果和stretch一样
  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

效果见 justify-content/align-content属性值样式表现 » CSS新世界demo演示

place-content

是align-content属性和justify-content属性的合并简写形式。

place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

指定项目的位置

通过指定项目的四个边框分别定位在哪根网格线，来指定项目的位置

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

属性值可以是负整数，但是不能是0，负整数表示从右侧开始计数网格线。

  1. .container {
  2.     display: grid;
  3.     grid: auto / repeat(6, 1fr);
  4. }
  5. .item {
  6.     grid-column-start: -3;
  7.     grid-column-end: 2;
  8.     /* 设置背景色 */
  9.     background: deepskyblue;
  10. }

属性值还可以指定为网格线的名字

  1. .item-1 {
  2.   grid-column-start: header-start;
  3.   grid-column-end: header-end;
  4. }

 名称还有一个自动补全-start后缀和-end后缀的特性

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: [A-start] 100px [A-end B-start] auto [B-end] auto;
  4. }
  5.  
  6. .item {
  7.     grid-column-start: A;
  8.     grid-column-end: B;
  9.     /* 设置背景颜色 */
  10.     background: deepskyblue;
  11. }

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: [A] 80px [B] auto [C] 100px [D];
  4. }
  5. .item {
  6.     grid-column-start: B 4;
  7.     grid-column-end: C;
  8.     /* 设置背景颜色 */
  9.     background: deepskyblue;
  10. }

span

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

span后的数字不能是负值，也不能是0，也不能是小数。

  1. .item-1 {
  2.   grid-column-start: span 2;
  3. }

 1号项目的左边框距离右边框跨越2个网格。

grid-column-end设置span不会产生任何效果

  1. <div class="container">
  2.     <div class="item-b"></div>
  3. </div>
  1. .item-b {
  2.     grid-column-start: 2;
  3.     grid-column-end: span 纵线3;
  4.     grid-row-start: 第一行开始;
  5.     grid-row-end: span 3;
  6. }

 

 如果网格布局中有多个网格线的命名是B或者是B-start

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: [B] 80px [B] auto [B] 100px [D] auto auto;
  4. }

则spanB表示离grid-column-end位置最近的一个网格线B，而如果属性值是B而不是spanB，则起始位置会是离grid-column-end位置最远的一个网格线B。

 效果见 span和不同数量网格线命名效果 » CSS新世界demo演示

如果网格布局中没有网格线的命名是B或者B-start

  1. .container {
  2.     display: grid;
  3.     grid-template-columns: [A] 80px [C] auto [C] 100px [D] auto auto;
  4. }
  1. .item {
  2.     grid-column-start: span B;
  3.     grid-column-end: 4;
  4. }

如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

  • grid-column属性是grid-column-start和grid-column-end的合并简写形式
  • grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

斜杠以及后面的部分可以省略，默认跨越一个网格。

  1. .item-1 {
  2.   grid-column: 1 / 3;
  3.   grid-row: 1 / 2;
  4. }
  5. /* 等同于 */
  6. .item-1 {
  7.   grid-column-start: 1;
  8.   grid-column-end: 3;
  9.   grid-row-start: 1;
  10.   grid-row-end: 2;
  11. }

项目item-1占据第一行，从第一根列线到第三根列线。

也可以使用span关键字，表示跨越多少个网格。

  1. .item-1 {
  2.   background: #b03532;
  3.   grid-column: 1 / 3;
  4.   grid-row: 1 / 3;
  5. }
  6. /* 等同于 */
  7. .item-1 {
  8.   background: #b03532;
  9.   grid-column: 1 / span 2;
  10.   grid-row: 1 / span 2;
  11. }

项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

其他效果范例如下： 

  1. .item-1 {
  2.   grid-column-start: 2;
  3.   grid-column-end: 4;
  4. }

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

  1. .item-1 {
  2.   grid-column-start: 1;
  3.   grid-column-end: 3;
  4.   grid-row-start: 2;
  5.   grid-row-end: 4;
  6. }

指定项目的区域

  1. .item-1 {
  2.   grid-area: e;
  3. }

 1号项目位于e区域

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

  1. .item {
  2.   grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  3. }
  1. .container {
  2.     grid: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
  3. }
  4. .item {
  5.     grid-area: 1 / 2 / 3 / 4;
  6. }

 

  1. .item {
  2. grid-area: 4 A / span 4 / B / D;
  3.  
  4. /* 等同于 */
  5.  
  6. grid-row-start: 4 A;
  7. grid-column-start: span 4;
  8. grid-row-end: B;
  9. grid-column-end: D;
  10. }
  1. .item {
  2. grid-area: A / B / C;
  3.  
  4. /* 等同于 */
  5.  
  6. grid-area: A / B / C / B;
  7. }
  1. .item {
  2. grid-area: 1 / 2 / 3;
  3.  
  4. /* 等同于 */
  5.  
  6. grid-area: 1 / 2 / 3 / auto;
  7. }
  1. .item {
  2. grid-area: A / B;
  3.  
  4. /* 等同于 */
  5.  
  6. grid-area: A / B / A / B;
  7. }
  1. .item {
  2. grid-area: 1 / 2;
  3.  
  4. /* 等同于 */
  5. grid-area: 1 / 2 / auto / auto;
  6. }
  1. .item {
  2. grid-area: A;
  3.  
  4. /* 等同于 */
  5. grid-area: A / A / A / A;
  6. }
  1. .item {
  2. grid-area: 2;
  3.  
  4. /* 等同于 */
  5. grid-area: 2 / auto / auto / auto;
  6. }

 css中grid网格布局的经典应用——图文层叠_朝阳39的博客-CSDN博客

设置自动生成的行和列

  • “隐式网格” —— 是非正常网格，其在grid子项多于设置的单元格数量，或grid子项的位置出现在设定的网格范围之外时出现
  • “显式网格” —— 在规定容器内显示的网格

grid-auto-columns属性和grid-auto-rows属性用来设置“隐式网格” 的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

默认值是auto，可以是长度值、百分比值和fr值，也可以是min-content关键字和max-content关键字，也支持mimmax()函数和fit-content()函数，但是不支持repeat()函数。

划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px 100px;
  4.   grid-template-rows: 100px 100px 100px;
  5.   grid-auto-rows: 50px; 
  6. }

上面代码指定新增的行高统一为50px（原始的行高为100px）。

其他合并简写属性

从易读易写的角度考虑，建议不要合并属性，所以了解即可，方便读懂别人的代码

grid-template

是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

  1. .container {
  2.     grid-template: 25% 100px auto 60px / 80px auto 100px;
  3. }
.container { grid-template: none; }

 属性值none表示将3个CSS属性都设置为初始值none。

  1. .container {
  2.     grid-template: 
  3.         "葡萄 葡萄 葡萄" 1fr 
  4.         "龙虾 养鱼 养鱼" 1fr 
  5.         "龙虾 养鱼 养鱼" 1fr 
  6.         "西瓜 西瓜 西瓜" 1fr
  7.         / 1fr 1fr 1fr;
  8. }

网格线名称总是出现在网格尺寸和区域名称的两侧

  1. .container {
  2.     grid-template: 
  3.         [row-name1-start] "葡萄 葡萄 葡萄" 1fr [row-name1-end row-name2-start]
  4.         "龙虾 养鱼 养鱼" 1fr [row-name2-end]
  5.         "龙虾 养鱼 养鱼" 1fr [row-name3-end]
  6.         [row-name4-start] "西瓜 西瓜 西瓜" 1fr [row-name4-end]
  7.         / [col-name-start] 1fr [col-name-end] auto;
  8. }

 [col-name1-end]和[col-name2-start]必须放在同一个中括号里面，否则就是不合法的。但是，在包含区域名称的grid-template缩写语法中，[col-name1-end][col-name2-start]既可以放在一个中括号中，也可以分开放在两个中括号中。

  1. .container {
  2.     grid-template: 
  3.         "a" 1fr [name1-end name2-start]
  4.         "b";
  5. }
  6. .container {
  7.     grid-template: 
  8.         "a" 1fr [name1-end]
  9.         [name2-start] "b";
  10. }

包含区域名称的grid-template缩写属性不支持repeat()函数

grid

是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

  1. .container {
  2.     grid: 25% 100px auto 60px / 80px auto 100px;
  3. }
  1. /* none表示设置所有子属性为初始值  */
  2. grid: none
  1. .container {
  2.     grid: 100px 300px / 3fr 1fr;
  3. }
  4.  
  5. /*  等同于  */
  6.  
  7. .container {
  8.     grid-template-rows: 100px 300px;
  9.     grid-template-columns: 3fr 1fr;
  10. }
  1. .container {
  2.     grid: 100px 300px / auto-flow 200px;
  3. }
  4.  
  5. /*  auto-flow 在斜杠左边时解析为row，在斜杠右边时解析为 column */
  6. /*  所以上方代码等同于 */
  7.  
  8. .container {
  9.     grid-template-rows: 100px 300px;
  10.     grid-auto-flow: column;
  11.     grid-auto-columns: 200px;
  12. }

Grid 布局 -- 实战范例

九宫格

  1. <div class="container">
  2.   <div class="box">1</div>
  3.   <div class="box">2</div>
  4.   <div class="box">3</div>
  5.   <div class="box">4</div>
  6.   <div class="box">5</div>
  7.   <div class="box">6</div>
  8.   <div class="box">7</div>
  9.   <div class="box">8</div>
  10.   <div class="box">9</div>
  11. </div>
  12.  
  13. <style>
  14.   .container {
  15.     display: inline-grid;
  16.     grid-template-columns: 1fr 1fr 1fr;
  17.   }
  18.   .box {
  19.     border: 1px solid;
  20.     width: 30px;
  21.     height: 30px;
  22.     line-height: 30px;
  23.     text-align: center;
  24.   }
  25. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/295603
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号