内容简介:grid 布局是 css 中的一种新的布局方式,对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同,flex 着重于单轴,而 grid 适应于多轴,下面就来做个简单的介绍。flex 布局示意grid 布局示意
grid 布局是 css 中的一种新的布局方式,对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同,flex 着重于单轴,而 grid 适应于多轴,下面就来做个简单的介绍。
flex 布局示意
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); } 复制代码
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> 复制代码
最终效果图如下:
注意:当使用了 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。 示意图如下:
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:
start:
end:
center:
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:
end:
center:
stretch: 在这个例子中与 start 相同。
space-around:
space-between:
space-evenly:
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 的情况:
column 的情况:
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; } 复制代码
4.3 place-self
旗下有 justify-self、align-self 两个属性:沿着内联(行/列)轴对齐单元格内的网格项,主要的值有:start | end | center | stretch。
place-self: align-self justify-self;
.item-1 { place-self: center stretch; } 复制代码
5. 补充
显式网格:通过使用 grid-template-columns 和 grid-template-rows 属性显式设置的一个网格的列和行。
隐式网格:grid-auto-flow 默认流,grid-auto-flow 属性可以改变默认流方向 row 为 column。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Grid布局 - 一键布局尝试总结~
- 再次简单明了总结flex布局,一看就懂...
- 提高weex布局开发效率的一点点总结
- yii2视图(布局)中各种函数总结报告及使用场景
- 盒模型的相关计算及flex布局的不常见规律总结
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Node.js开发指南
郭家寶(BYVoid) / 人民邮电出版社 / 2012-7 / 45.00元
Node.js是一种方兴未艾的新技术,诞生于2009年。经过两年的快速变化,Node.js生态圈已经逐渐走向稳定。Node.js采用了以往类似语言和框架中非常罕见的技术,总结为关键词就是:非阻塞式控制流、异步I/O、单线程消息循环。不少开发者在入门时总要经历一个痛苦的思维转变过程,给学习带来巨大的障碍。 而本书的目的就是帮助读者扫清这些障碍,学会使用Node.js进行Web后端开发,同时掌握事件驱......一起来看看 《Node.js开发指南》 这本书的介绍吧!