grid布局

功能最强大的布局方案

进一步降低CSS门槛

一维布局用flex

二维用grid布局

CSS tricks: A Complete Guide to rid

Grid布局也分container和item

分别记忆

成为container

父元素加

1
2
3

.container{
    display: grid | inline-grid;
}

行和列：grid-template-rows和grid-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-gap和grid-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-start和grid-column-end一起使用时，你也许已经注意到结束的值比起始的值大。但事实证明并非如此！

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

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

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

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

参考文章

CSS 布局.pdf

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

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简