Grid布局入门

Grid Line

分界线：组成网格结构，它们是垂直或者水平

Grid Track

网格的列或者行

Grid Cell

网格的一个单元

Grid Area

四个网格线包围的总空间

父容器

display

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

• 其他两个字面意思

• subgrid 就是指如果本身就是要给grid item ， 可以使用这个属性来获取它的父节点的行/列的大小，而不是它自己的大小

gird-template-columns/grid-template-rows

空格代表网格线

.container {  width: 400px;  height: 300px;  border: 1px solid red;  
  display: grid;  gird-template-columns: 40px 50px auto 50px 40px;  grid-template-rows: 25% 100px auto;
}

gird-template-columns/grid-template-rows

还可以给网格线命名，一个网格线可以不止一个名字，如下第二个网格线有两个名字

.container {  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

另外重复的地方还可以用repeat()来简化

.container {  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

上面等同于

.container {  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

"fr"允许将轨道大小设置为自由空间，如下则是将container除去50px后的空间分为1/3：

.container {  grid-template-columns: 1fr 50px1fr 1fr;
}

grid-template-areas

通过grid-area属性来命名网格区域的名称

• <grid-area-name> - 使用 grid-area 属性设置的网格区域的名称

• .- 点号代表一个空网格单元

• none - 没有定义网格区域

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid;  grid-template-columns: 50px 50px auto 50px;  grid-template-rows: auto;  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer";
}.header {  grid-area: header;  background: red;
}.main {  grid-area: main;  background: blue;
}.aside {  grid-area: aside;  background: yellow;
}.footer {  grid-area: footer;  background: grey;
}

会得到如下图

grid-template-areas

grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid;  
 /*  grid-template-columns: 50px 50px auto 50px;
  grid-template-rows: 50px auto 50px;
  grid-template-areas: 
    "header header header header"
    "main main . aside"
    "footer footer footer footer"; */
  grid-template: 
    "header header header header" 50px 
    "main main . aside" auto    "footer footer footer footer" 50px
    / 50px 50px auto 50px;
}

下面等价于上面

grid-column-gap / grid-row-gap

设置行列的缝隙

  grid-column-gap: 10px;
  grid-row-gap: 15px;

grid-gap

上面的缩写
grid-gap: 15px 10px;

justify-items / align-items / justify-content / align-content

用法和flex布局类似，暂不介绍

grid-auto-columns / grid-auto-rows

制定自动生成的轨道的大小

grid-auto-flow

如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目

grid

是所有的简写，和grid-template相似

子元素

grid-column-start / grid-column-end / grid-row-start /grid-row-end

• <line>: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线

• span <number>: 网格项将跨越指定数量的网格轨道

• span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线

• auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

grid-column / grid-row

上面的简写

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

例子：

.container {  width: 400px;  height: 300px;  border: 1px solid red;  display: grid; 
  grid: 50px auto 50px / 10% auto 10%;
}.header {  grid-column: 1/ span 3;  grid-row: 1;  background: red;
}.main {  grid-column: 2;  grid-row: 2;  background: blue;
}.aside {  grid-column: 3;  grid-row: 2;  background: yellow;
}.footer {  grid-column: 1/ 4;  grid-row: 3;  background: grey;
}

子元素

grid-area

给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用

justify-self

沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）

align-self

沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）

作者：徐金俊
链接：https://www.jianshu.com/p/b2a87d05afec