【CSS】Grid 布局总结

栏目: CSS · 发布时间: 4年前

内容简介:grid 布局是 css 中的一种新的布局方式,对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同,flex 着重于单轴,而 grid 适应于多轴,下面就来做个简单的介绍。flex 布局示意grid 布局示意

grid 布局是 css 中的一种新的布局方式,对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同,flex 着重于单轴,而 grid 适应于多轴,下面就来做个简单的介绍。

flex 布局示意

【CSS】Grid 布局总结

grid 布局示意

【CSS】Grid 布局总结

2. 基本概念

设置 display: grid; 的元素称为容器,它的直接子元素称为项目,但注意子孙元素不是项目。

grid line:网格线,构成 grid 布局的结构,分为水平和竖直两种。

grid track:两条相邻网格线之间的空间,可以认为是一行或者一列。

grid cell:两条相邻行和相邻列之间分割线组成的空间,是 grid 布局中的一个单元。

grid area:四条网格线包裹的全部空间,任意数量的 grid cell 组成一个 grid area。

3. 容器属性

grid 容器的属性还是有点多的,一共有 18 个,但是很多可以通过简写完成,所以也不用太紧张。

  • grid-template 系列
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
  • grid-gap 系列
    • grid-column-gap
    • grid-row-gap
  • place-items 系列
    • justify-items
    • align-items
  • place-content 系列
    • justify-content
    • align-content
  • grid 系列
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow

3.1 grid-template 系列

3.1.1 grid-template-columns 、grid-template-rows

定义行和列的数量。

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
复制代码

这样就定义了一个三行三列的 grid 容器,grid-template-rows / grid-template-columns 接收的值有 auto、fr、px 和 %。

介绍一下 fr,其实也不难理解,类似 flex: 1 来就行了。

这里可以给 grid line 命名,方便取到对应的 line 对 item 进行设置,详情可以在下面 item 属性上了解。

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
/** 通过 repeat 方法可以简写如下
* 此处需要注意的就是线条命名变成了从1开始递增,并且是用空格分隔字母和序号,类似: row 1、row 2、row 3
**/
.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
}
复制代码
【CSS】Grid 布局总结

3.1.2 grid-template-areas

grid 模板区域:通过给网格区域指定名称,方便项目属性 grid-area 取用网格区域,句法如下: grid-template-areas: none | grid-area-name | .(半角句号);

none: 为定义的网格区域;

grid-area-name: 定义的网格区域名称,项目属性 grid-area 使用; .: 空的网格单元格;

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";  
}
.container>div {
  border: 1px solid lightcoral;
}
// 项目
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: sidebar;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: footer;
}
// html
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
复制代码

最终效果图如下:

【CSS】Grid 布局总结

注意:当使用了 grid-template-areas 对网格命名后,网格的行、列的开始线与结束线会自动获得一个 name-start、name-end 的命名,所以也会出现同一条线拥有多个名称的情况,例如 header-start, main-start, and footer-start。

.item1 {
  grid-area: header;
}
// 以上代码效果等同于
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
复制代码

3.1.3 grid-template

终于到这个复合属性了,该属性类似 background、font、border 等,是对以上 grid-template 系列属性的一个集合。

首先来看一下基础语法: grid-template: none | grid-template-rows / grid-template-columns;

none: 将所有属性重置为初始值;

grid-template-rows / grid-template-columns: 将 grid-template-columns 和 grid-template-rows 分别设置为指定值,并将 grid-template-areas 设置为none;

看到这可能有人会有疑问,说好的全部属性呢,怎么没有看到 grid-template-area?实话说,句法有点复杂,下面单独拎出来看看。

// 使用 grid-template 综合之前的所有属性
grid-template:
  [row1-start] "header header header" 1fr [row1-end]
  [row2-start] "main . sidebar" 1fr [row2-end]
  [row2-start] "footer footer footer" 1fr [row2-end]
  / [column-start] 1fr 1fr 1fr [column-end];

// -------------分割线-------------
.item1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
// 以上代码效果等同于
.item1 {
  grid-column-start: column-start;
  grid-column-end: column-end;
}
复制代码

3.2 grid-gap 系列

这个系列比较简单,就是定义行与行,列与列之间的间隙,就直接用 grid-gap 来介绍了。

grid-gap: grid-row-gap grid-column-gap; 如果只写一个值那就是行、列间隙一致。

注意: 在 Chrome 68+, Safari 11.2 Release 50+ and Opera 54+ 以上版本中,可以去掉 grid 前缀,而只需要些 row-gap、column-gap、gap 了。

.containner {
  // ... 之前的代码
  grid-gap: 10px;
}
复制代码

为了区分,用红色框出来原来的布局,虚线间的间隔就是设置的 10px 的 gap。 示意图如下:

【CSS】Grid 布局总结

3.3 place-items 与 place-content 系列

place-items: justify-items align-items;

place-content: justify-content align-content;

这两个系列放在一起介绍,因为很多地方很相似,异曲同工。

justify-items: 网格项水平的对齐方式,默认是 stretch,其余的值还有 start、end、center。

stretch:

【CSS】Grid 布局总结

start:

【CSS】Grid 布局总结

end:

【CSS】Grid 布局总结

center:

【CSS】Grid 布局总结

align-items:网格项垂直的对齐方式,整体如同 justify-items,不过水平换成了垂直。

// 下面两个属性需要我们调整一下之前的 css 代码,由于 place 系列需要某些特殊情况(就是 item 组成的网格大小小于容器)
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 100px 100px / 100px 100px;
  gap: 10px;
  justify-content: start;
  border: 1px solid #ccc;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}
复制代码

justify-content:网格整体相对于容器的水平对齐方式,默认值是 start,其余的值还有 end、center、stretch、space-around、space-between、space-evenly。

start:

【CSS】Grid 布局总结

end:

【CSS】Grid 布局总结

center:

【CSS】Grid 布局总结

stretch: 在这个例子中与 start 相同。

space-around:

【CSS】Grid 布局总结

space-between:

【CSS】Grid 布局总结

space-evenly:

【CSS】Grid 布局总结

align-content:就是与 justify-content 相反的操作了。

3.4 grid 系列

grid-auto-columns与 grid-auto-rows 可以用来定义我们超出网格格数的隐式网格的大小。

.box {
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}
复制代码

以上如果没有定义 grid-template 之类的属性的话,会根据 item 来生成 100 * 100 px 的网格。

.item4 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
复制代码

如果有一个这样 item 定义超出了网格数,那么它的大小就是 grid-auto 设置的 100 * 100 px,这里要只能通过 grid-auto-columns 调整自动创建的 item 的宽度,高度不可以。

grid-auto-flow:定义了 item 的自流向方向,举个例子。

// html
<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

// css
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  grid-auto-flow: row;
  gap: 10px;
  justify-content: start;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item4 {
  grid-column: 1 / 3;
  grid-row: 4;
}
复制代码

row 的情况:

【CSS】Grid 布局总结

column 的情况:

【CSS】Grid 布局总结

gird:是以下属性的缩写形式——grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow。但是要注意的是,你只能同时声明显示属性或者隐式属性。

/** 
* 隐式属性部分
**/
grid: auto-flow / 1fr 1fr 1fr;
// 等同于
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;

grid: auto-flow dense 100px / 1fr 1fr 1fr;
// 等同于
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 1fr 1fr;

/** 
* 显示属性部分
**/
gird: 1fr 1fr 1fr / 1fr 1fr 1fr;
// 等同于
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

/**
* 复杂属性
**/
grid: [row1-start] "header header header" 1fr [row1-end]
      [row2-start] "main . sidebar" 1fr [row2-end]
      [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
// 等同于
grid-template-areas:
  "header header header"
  "footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: 1fr 1fr 1fr;
复制代码

4. 项目属性

这里有一个要注意的地方,flaot、display(inline-table、contents、 table 除外)、vertical-align 以及 column-* 对 grid item 项目无效。

4.1 grid-column、grid-row

旗下有 4 个属性:grid-column-start、grid-column-end、grid-row-start、grid-row-end,用来确定 item 的位置。

属性的值有:number | lineName | span <number> | span <lineName> | auto

对属性的值以 9 宫格为例介绍。

number:从左往右从上往下分别是 1、2、3、4 四条。

lineName:在容器上定义的分隔线的名称。

span <number> | span <lineName>:跨度的个数和跨到某条分隔线。

auto:自动跨度或默认 1 个跨度。

// 将某个 item 定位到 第 2 行第 3 列
// number
.item {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
// lineName
.container {
  // ...
  grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4];
  grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4];
}
.item {
  grid-column:column-3 / column-4;
  grid-row: row-2 / row-3;
}
// span <number> | span <name>
.item {
  grid-column:column-3 / span 1;
  grid-row: row-2 / span row-3;
}
复制代码

4.2 grid-area

通过容器 grid-template-areas 设置的名称设置 item 位置,也可以当做是 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的缩写。

.container {
  // ...
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "main . sidebar" 1fr [row2-end]
        [row3-start] "footer footer footer" 1fr [row3-end] / 1fr 1fr 1fr;
}
.item-1 {
  grid-area: header;
}
// 另一种写法
.item {
  grid-area: row1-start / 1 / row1-end / 4;
}
复制代码
【CSS】Grid 布局总结

4.3 place-self

旗下有 justify-self、align-self 两个属性:沿着内联(行/列)轴对齐单元格内的网格项,主要的值有:start | end | center | stretch。

place-self: align-self justify-self;

.item-1 {
  place-self: center stretch;
}
复制代码
【CSS】Grid 布局总结

5. 补充

显式网格:通过使用 grid-template-columns 和 grid-template-rows 属性显式设置的一个网格的列和行。

隐式网格:grid-auto-flow 默认流,grid-auto-flow 属性可以改变默认流方向 row 为 column。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Node.js开发指南

Node.js开发指南

郭家寶(BYVoid) / 人民邮电出版社 / 2012-7 / 45.00元

Node.js是一种方兴未艾的新技术,诞生于2009年。经过两年的快速变化,Node.js生态圈已经逐渐走向稳定。Node.js采用了以往类似语言和框架中非常罕见的技术,总结为关键词就是:非阻塞式控制流、异步I/O、单线程消息循环。不少开发者在入门时总要经历一个痛苦的思维转变过程,给学习带来巨大的障碍。 而本书的目的就是帮助读者扫清这些障碍,学会使用Node.js进行Web后端开发,同时掌握事件驱......一起来看看 《Node.js开发指南》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具