【CSS GRID】一起来学习CSS网格布局吧!

时间:2021-1-8 作者:admin

display: grid

网格项目按行排列,网格项目占用整个容器的宽度。

1 2 3 display: inline-grid

网格项目按行排列,网格项目宽度由自身宽度决定。

1 2 简单是稳定的前提 3

grid-template-rows: 50px 100px

属性grid-template-rows用于定义行的尺寸,即轨道尺寸。轨道尺寸可以是任何非负的长度值(px,%,em,等)

网格项目1的行高是50px,网格项目2的行高是100px。

因为只定义了两个行高,网格项目3和4的行高取决于其本身的高度。

1 2 3 4

grid-template-columns: 90px 50px 120px

类似于行的定义,属性grid-template-columns用于定义列的尺寸。

因为定义中只有三列,所以项目4,5,6排在新的一行; 并因为它们位于第1,2,3列的轨道上,所以其宽度等于定义中第1,2,3列轨道的宽度。

网格项目的第1列,第2列,第3列的宽度分别是 90px, 50px 和 120px 。

1 2 3 4 5 6

grid-template-columns: 1fr 1fr 2fr

单位fr用于表示轨道尺寸配额,表示按配额比例分配可用空间。

本例中,项目1占 1/4 宽度,项目2占 1/4 宽度,项目3占 1/2 宽度。

1 2 3

grid-template-columns: 3rem 25% 1fr 2fr

单位fr和其它长度单位混合使用时,fr的计算基于其它单位分配后的剩余空间。

本例中,1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3 1 2 3 4

grid-template-rows:    minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

函数minmax()接收两个参数:第一个参数表示最小轨道尺寸,第二个参数表示最大轨道尺寸。长度值可以是auto,表示轨道尺寸可以根据内容大小进行伸长或收缩。

本例中,第一行最小高度设置成100px,但是最大高度设置成auto,表示行高可以根据内容伸长超过100px。

本例中,第一列宽度的最大值设置成50%,表示其宽度不能超过整个容器宽度的50%。

1 2 3 4 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。Flexbox的出现部分解决了上述问题,但Flex布局是为了解决简单的一维布局,适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的,适用页面的整体布局。在实际工作中,Grid和Flexbox不但不矛盾,而且还能很好的结合使用。做为WEB程序员,我们在页面布局问题上都付出过努力,也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块,我们有理由对Grid充满期待。 5 6

grid-template-rows:    repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);

函数repeat()接收两个参数:第一个参数表示重复的次数,第二个参数表示轨道尺寸。 1 2 3 4 5 6 7 8 9 10 11 12

grid-template-columns: 30px repeat(3, 1fr) 30px

函数repeat()可以用在轨道定义列表当中

本例中,第1列和第5列的宽度是30px。函数repeat()创建了中间3列,每一列宽度都是1fr。 1 2 3 4 5 6 7 8 9 10

grid-row-gap:    20px;
grid-column-gap: 5rem;

间隙尺寸可以是任何非负的长度值(px,%,em等)。

1 2 3 4 grid-gap: 100px 1em

属性grid-gapgrid-row-gapgrid-column-gap的简写形式。

第一个值表示行间隙,第二个值表示列间隙。

1 2 3 4 grid-gap: 2rem

如只有一个值,则其即表示行间隙,也表示列间隙

1 2 3 4

grid-row-start:    2;
grid-row-end:      3;
grid-column-start: 2;
grid-column-end:   3;

这是一个3行2列的网格,即在行上有4条网格线,在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。

本例中,项目只跨越一行一列,则grid-row-endgrid-column-end的定义可以省略。 1 2 3 4 5 6 1 2 3 1 2 3 4

grid-row:    2;
grid-column: 3 / 4;

属性grid-rowgrid-row-startgrid-row-end的简写形式。

属性grid-columngrid-column-startgrid-column-end的简写形式。

如果只指定一个值,它表示 grid-row/column-start

如果两个值都指定,第一个表示 grid-row/column-start ,第二个值表示grid-row/column-end。而且你必须用斜杠(/)分隔这两个值。 1 2 3 4 5 6 1 2 3 1 2 3 4 grid-area: 2 / 2 / 3 / 3

属性grid-areagrid-row-start, grid-column-start, grid-row-endgrid-column-end的简写形式。

如果四个值都指定,则第一个表示 grid-row-start, 第二个表示 grid-column-start, 第三个表示 grid-row-end ,第四个表示 grid-column-end。 1 2 3 4 5 6 1 2 3 1 2 3 4

grid-column-start: 1;
grid-column-end:   4;

通过grid-column-startgrid-column-end属性值的设置,使该网格项目跨越多列。 1 2 3 4

grid-row-start: 1;
grid-row-end:   4;

通过grid-row-startgrid-row-end属性值的设置,使该网格项目跨越多行。 1 2 3 4 5 6 7

grid-row:    2 / 5;
grid-column: 2 / 4;

简写属性 grid-rowgrid-column 即能用来定位项目,也能用来使项目跨越多个行列。 1 2 3 4 5 6 7

grid-row:    2 / span 3;
grid-column: span 2;

关键字 span 用来指定跨越行或列的数量。 1 2 3 4 5 6 7

grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

用属性grid-template-rowsgrid-template-columns定义网格,同时定义网格线名称。

为避免混淆,网格线名称应避免使用规范中的关键字(span等)。

定义网格线名称的方法是要将其放在中括号内([name-of-line]),并要和网格轨道相对应。

grid-template-rows:    [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

可以给同一网格线定义多个名称,方法就是在中括号内用空格将多个名称分开。

每一个网格线名都可以被引用,以用来定位网格项目。

grid-row-start:    row-2-start;
grid-row-end:      row-end;
grid-column-start: col-2-start;
grid-column-end:   col-end;

引用网格线名称不用加中括号。

grid-row:    row-2-start / row-end;
grid-column: col-2-start / col-end;

简写属性grid-rowgrid-column也可以利用网格线名称来定位项目。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

函数repeat()可以用来定义同名网格线。 这样多个网格线拥有相同的名字。

同名网格线会被分配一个位置编号,做为其唯一标识。

grid-row:    row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

用同名网格线来定位项目时,应注意在网格线名称和编号之间有一个空格。

本例中,项目1的行定位开始于第2条名称是row-start的网格线,结束于第3条名称是row-end的网格线;列定位开始于第1条名称是col-start的网格线,结束于第3条名称是col-start的网格线。

grid-template-areas:   "header header"
                        "content sidebar"
                        "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

一组区域名称要放在单引号或双引号内,每一个名称之间以空格分隔。

每一组名称定义一行,每一个名称定义一列。

grid-row-start:    header;
grid-row-end:      header;
grid-column-start: header;
grid-column-end:   header;

网格区域名称可以用在属性grid-row-start, grid-row-end, grid-column-start, 和 grid-column-end的值中,用来定位项目。

grid-row:    footer;
grid-column: footer;

网格区域名称也可以用于简写属性grid-rowgrid-column的值中。

grid-area: sidebar;

网格区域名称也可以用于简写属性grid-area的值中。

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

本例中,只定一个行轨道,因此项目 1 和 2 高 70px

第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。 属性grid-auto-rows 定义了隐式网格的行轨道尺寸,即项目3和4的高度是 140px

grid-auto-flow: row

缺省的网格布局方向是行的方向(row)。

grid-auto-flow: column

网格的布局方向可以定义为列的方向(column)。

grid-template-columns: 30px 60px;
grid-auto-flow:        column;
grid-auto-columns:     1fr;

本例中,我们只定义了两个列轨道的尺寸30px60px

隐式网格中自动创建其它列并给项目3,4,5分配空间;分配的空间尺寸是通过属性 grid-auto-columns定义的。

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];

本例中,行和列都有名为inner-startinner-end的网格线,它们隐式地给网格区域分派了名称(inner)。

grid-area: inner

这样我们就能够直接使用网格区域名来定位,而不需要再用网格线来定位项目了。

grid-template-areas:   "header header"
                        "content sidebar"
                        "footer footer";
grid-template-rows:    80px 1fr 40px;
grid-template-columns: 1fr 200px;

定义网格区域时隐式的命名了网格线的名称。这些网格线的名称是基于区域名加上-start-end后缀组成的。

grid-row-start:    header-start;
grid-row-end:      content-start;
grid-column-start: footer-start;
grid-column-end:   sidebar-end;

本例中,header是通过隐式网格线名称进行定位的。

.item-1,
.item-2 {
  grid-row-start:  1;
  grid-column-end: span 2;
}

.item-1 { grid-column-start: 1; z-index: 1; }
.item-2 { grid-column-start: 2 }

本例中,项目1 和 2 行定位开始于第1条行网格线,并跨越两列。

两个项目都是用网格线编号进行定位。项目1起始于第1条列网格线,项目2起始于第2条列网格线,这使得两个项目在第一行中间列发生层叠。

缺省情况下,项目2将层叠于项目1之上;然而,给项目1设置属性z-index: 1就使得项目1层叠于项目2之上。

grid-row-start:    header-start;
grid-row-end:      content-end;
grid-column-start: content-start;
grid-column-end:   sidebar-start;
z-index: 1;

本例中,利用在grid-template-areas定义中的隐式网格线名称,定位了一个网格项目(overlay),并将层叠于上层。

.grid {
  grid-template-rows: 80px 80px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "content content"
                       "content content";
}
.item { grid-area: content }
.grid {
  justify-items: start
}

在行的轴线起点处对齐。

justify-items: center

在行的轴线中点处对齐。

justify-items: end

在行的轴线终点处对齐。

justify-items: stretch

在行的轴线方向延伸并填满整个区域。stretch是缺省值。

align-items: start

在列的轴线起点处对齐。

align-items: center

在列的轴线中点处对齐。

align-items: end

在列的轴线终点处对齐。

align-items: stretch

在列的轴线方向延伸并填满整个区域。

justify-items: center
align-items:   center

项目定位于行轴和列轴线的中间位置。

项目可以用属性align-selfjustify-self定义自己的对齐方式,并支持如下这些属性值:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline
.item-1 { justify-self: start }
.item-2 { justify-self: center }
.item-3 { justify-self: end }

属性justify-self 在行的轴线方向定义对齐方式。

.item-1 { align-self: start }
.item-2 { align-self: center }
.item-3 { align-self: end }

属性align-self 在列的轴线方向定义对齐方式。

.item-1 {
  justify-self: center
  align-self:   center
}

项目1定位在行的轴线和列的轴线的中间位置。

.grid {
  width: 100%;
  height: 300px;
  grid-template-columns: repeat(4, 45px);
  grid-template-rows: repeat(4, 45px);
  grid-gap: 0.5em;
  justify-content: start;
}

列的轨道在行的轴线起点处对齐。start是缺省值。

justify-content: end;

列的轨道在行的轴线终点处对齐。

justify-content: center;

列的轨道在行的轴线中间处对齐。

justify-content: space-around;

在每一列的两侧平均分配额外空间。

justify-content: space-between;

在列与列之间平均分配额外的空间。

justify-content: space-evenly;

在列与列之间及列与边界之间平均分配额外空间。

align-content: start;

行的轨道在列的轴线起点处对齐,属性start是缺省值。

align-content: end;

行的轨道在列的轴线终点处对齐。

align-content: center;

行的轨道在列的轴线中点处对齐。

align-content: space-around;

每一行的两侧平均分配额外空间。

align-content: space-between;

在行与行之间平均分配额外空间。

align-content: space-evenly;

在行与行之间及行与边界之间平均分配额外空间。

本教程相对全面地介绍了网格的相关内容,但这并不是一个完整的技术文档。想更全面的学习相关内容,推荐访问 Mozilla开发者网络W3C 的网格文档。

还有一些很好的学习资源分享给大家:

由于能力有限,翻译中难免错误较多,还请大家多多谅解!

十分感谢原文作者Jonathan Suh在本文排版设计,示例制作,文字编辑等方面卓越的工作。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。