首页 > HTML5+CSS > CSS学习 > CSS中的grid网格布局
2020
10-14

CSS中的grid网格布局

Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

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

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

既可以设置容器为块元素(display:grid),也可以设置容器为行内元素(display:inline-grid)。

设为网格布局以后,容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

设置容器网格的列宽和行高

grid-template-columns:定义每一列的列宽
grid-template-rows:定义每一行的行高

既可以使用绝对单位,也可以使用百分比

以下代码指定了一个三行三列的网格,列宽都是33.33%,行高都是100px
    .box {
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-rows: 100px 100px 100px;
    }

repeat()函数:有时候,重复写同样的值非常麻烦,可以使用repeat()函数,接受两个参数,第一个是重复的次数,第二个是所要重复的值。

    .box {
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 100px);
    }
    repeat()也可以重复某几个固定顺序的值
    grid-template-columns: repeat(2, 100px 20px 80px);
    表示把100px 20px 80px这三个固定顺序的值重复两次,即6列,第1列和第4列都是100px列宽。
    auto-fill关键字,表示自动填充,如果单元格的大小是固定的,但是容器的大小不确定,我们希望容纳尽可能多的单元格,此时使用auto-fill关键字
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 100px);
    }
    上例表示列宽为固定100px,我们不确定这个容器多宽,如果宽320px,那个会放置3列,如果宽变为610px,会放置6列。

fr关键字:

为了方便表示比例关系,网格布局提供了fr关键字(fraction的缩写,意为"片段")。

如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。

grid-template-columns: 1fr 1fr 2fr; 表示3列,其中第1列和第2列宽度相同且都是第3列的一半

可以与绝对长度的单位结合使用:

grid-template-columns: 100px 1fr 2fr; 
表示3列,其中第1列固定100px,第2列和第3列会占满剩余空间且,第2列是第3列的一半。

minmax(min,max)函数产生一个长度范围,表示长度就在这个范围之中。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
表示第3列宽不小于100px,不大于1fr。

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;
第2列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度。

网格线的名称

grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4 row-4];
上面代码指定网格布局为3行3列,因此有4根垂直网格线和4根水平网格线。
方括号里面是这八根线的名字,允许同一根线有多个名字,如[r4 row-4]

设置容器网格的列间距和行间距

row-gap:设置行间距
column-gap:设置列间距
gap:是row-gap和column-gap的合并形式,如果省略了第二个值,默认认为等于第一个值。

合并单元格

一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'name1 name2 name3'
                     'name4 name5 name6'
                     'name7 name8 name9';

上面代码首先划分出9个单元格,然后给每个单元格命名,名称相同代表是一个区域。

grid-template-areas: 'head-left head-left head-right'
                     'main-left main-left main-right'
                     'main-left main-left footer';

如果某些区域不需要利用,则使用"点"(.)表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
上面代码中,中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域。

区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。

grid-template是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式,从易读易写的角度考虑,建议不要合并属性

容器的子元素排列顺序

grid-auto-flow属性

row:"先行后列",默认值,先填满第一行,再开始放入第二行
column:"先列后行",先填满第一列,再开始放入第二列
row dense和column dense两个值表示首先指定排列顺序,然后排满当前行或列之后的元素尽可能紧密填满,尽量不出现空格
下面两个图片是row和row dense的实际效果图
CSS中的grid网格布局 - 第1张  | 清河洛      CSS中的grid网格布局 - 第2张  | 清河洛

所有单元格作为一个整体相对容器的对齐方式

justify-content:水平对齐方式

align-content:垂直对齐方式

可选的值:start | end | center | stretch | space-around | space-between | space-evenly;

stretch:单元格大小没有指定时,拉伸占据整个网格容器。
space-around:每个单元格两侧的间隔相等(单元格之间的间隔比单元格与容器边框的间隔大一倍)
CSS中的grid网格布局 - 第3张  | 清河洛
space-between:单元格之间的间隔相等,单元格与容器边框之间没有间隔
CSS中的grid网格布局 - 第4张  | 清河洛
space-evenly:单元格之间、单元格与容器边框之间是同样长度的间隔
CSS中的grid网格布局 - 第5张  | 清河洛

place-content是align-content和justify-content的合并形式,省略第二个,默认与第一个值相等。

每个单元格内容的对齐方式

justify-items:水平对齐方式(start | end | center | stretch),默认stretch(拉伸,占满单元格)

align-items:垂直对齐方式(start | end | center | stretch),默认stretch(拉伸,占满单元格)

place-items是align-items和justify-items的合并形式,省略第二个,默认与第一个值相等。

自动创建新单元格

有时单元格不够用,这时浏览器会自动生成新的网格,grid-auto-columns和grid-auto-rows用来设置自动创建的新的网格的列宽和行高。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。从易读易写的角度考虑,建议不要合并属性。

指定元素的位置

通过网格线指定

grid-column-start:元素左边框的网格线
grid-column-end:元素右边框的网格线
grid-row-start:元素上边框的网格线
grid-row-end:元素下框的网格线

这4个属性的值可以是数字表示第几根网格线,也可以是网格线名字。

.item {
  grid-column-start: 2;
  grid-column-end: 4;
}
以上代码表示该元素的左边框是第2根垂直网格线,右边框是第4根垂直网格线,没有指定上下边框,会采用默认位置。
除该元素外其他元素都没有指定位置,由浏览器自动布局,这时它们的位置由容器的grid-auto-flow属性决定

这4个属性的值还可以使用span关键字,表示跨越多少个网格

.item {
  grid-column-end: span 2;
}
表示该元素左边框距离右边框跨越2个网格

grid-column是grid-column-start和grid-column-end的合并形式
grid-row是grid-row-start和grid-row-end的合并形式

值的格式为:<start-line> / <end-line>(两个值之间有一个斜杠),斜杠及后面的部分可以省略,默认跨越一个网格

通过区域名指定:

grid-area属性指定元素放在哪一个区域,可以直接指定区域名
也可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式,直接指定项目的位置。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

指定单个元素的对齐方式

justify-self:水平对齐方式(start | end | center | stretch)

align-self:垂直对齐方式(start | end | center | stretch)

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

以上三个属性分别覆盖justify-items,align-items和place-items,用法相同

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。