grid布局

功能最强大的布局方案

进一步降低CSS门槛

一维布局用flex

二维用grid布局

CSS tricks: A Complete Guide to rid

Grid布局也分containeritem

分别记忆

成为container

父元素加

1
2
3
.container{
    display: grid | inline-grid;
}

行和列:grid-template-rowsgrid-template-columns

1
2
3
4
5
6
.container{
    /* 分三行 */
    grid-template-rows: 25% 100px auto;
    /* 分五列 */
    grid-template-columns: 40px 50px auto 50px 40px;
}

经纬线(对应上面CSS)

  • 纬线

[1]—>[2]—>[3]—>[4]

对应,可互换

[-4]–>[-3]–>[-2]–>[-1]

  • 经线

[1]—>[2]—>[3]—>[4]—>[5]—>[6]

对应,可互换

[-6]–>[-5]–>[-4]–>[-3]–>[-2]–>[-1]

  • 可以给每条线取名字

    1
    2
    3
    4
    
    .container{
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    }
  • 取名有啥用,用于item

  • 可以设置item范围,范围到名为xx的那根线
1
2
3
4
5
6
.item-a{
    grid-row-start: row1-start;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: five;
}

单位fr,即free space,巧记:份儿

1
2
3
.container{
    grid-template-columns: 1fr 1fr 1fr;
}
1
2
3
.container{
    grid-template-columns: 1fr 50px 1fr 1fr;
}

可应用在平均等距布局使用,配合grid-gap代替负margin

仍需计算宽度

任意多子项

分区 grid-template-areas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.item-a{
    grid-area: header;
}

.item-b{
    grid-area: main;
}

.item-c{
    grid-area: sidebar;
}

.item-d{
    grid-area: footer;
}

.container{
    display:grid;
    grid-template-rows: 240px repeat(3, 120px);/* auto */
    grid-template-columns:  50px  50px  50px  50px;
    grid-template-areas: 
    "header header header header"   /* 第一行:header*4 不可省略为一个header */
    "main   main   .      sidebar"  /* 第二行:main empty sidebar */
    "footer footer footer footer";  /* 第三行:footer */
}

命名后用文字一一对应

一般用.表示为空,empty

空隙 grid-row-gapgrid-column-gap

1
2
3
4
5
6
.container{
    grid-template-rows: 80px auto 80px;
    grid-template-columns: 100px 50px 100px;
    grid-row-gap: 15px;
    grid-column-gap: 10px;
}

划线,以线的范围,填子元素

搭框架

grid属性太多,用到再说,用不到就算了

实践

  • 布局:grid尤其适合不规则布局
  • 经验

等到grid普及了,前端对CSS的要求进一步降低

浅尝辄止


例子和游戏

若仅使用grid-column-start,网格默认只占一列。然而,你可以使用grid-column-end属性将网格拓展到多列。

使用grid-column-end,将你的所有胡萝卜浇水,但不要将水浇到土地上哦,我们要节约用水!注意,胡萝卜从第一列开始,第四列结束。

包括开始,不包括结尾

  • [start:2,end:4)

左闭右开

当将grid-column-startgrid-column-end一起使用时,你也许已经注意到结束的值比起始的值大。但事实证明并非如此!

尝试设置grid-column-end的值小于5

start end 并不绝对,不是字面的意思 只分先后 左闭右开 [end:5,start:2)


开发者工具会影响grid 里图片大小?

grid布局&多种居中方式总结


·未完待续·

参考文章

CSS 布局.pdf

为什么CSS Grid比Bootstrap更适合布局 By阮一峰 2017

相关文章