grid布局速记

grid布局效果总览

容器属性

grid-template-rows

gird-template-columns

grid-template-areas

grid-auto-rows:  对未设置行高的网格设置默认高度，grid-template-rows可覆盖

grid-auto-columns:  对未设置行宽的网格设置默认宽度，grid-template-columns可覆盖

gird-auto-flow:  设置网格的流向，是按行排列，还是按列排列，还是其他

 

grid-column-gap

grid-row-gap

 

justify-items   单元格内的水平位置，设置的是网格项的位置，就是网格的直接子元素，是我们的目标元素，items通常指的就是网格项，如果网格项中包含多个元素，

                     其布局取决于网格项的布局，若网格项使用display:flex, 则其内多个元素按flex布局，所以网格项位置居中，并不代表其内部的所有元素位置都居中

align-items     单元格内的垂直位置，设置的是网格项的位置

place-items    是jusify-items和align-items的合并简写，place-items: auto center;

justify-content  网格在容器内面的水平位置，1. center值会是非定宽(auto,fr)网格收缩, 不收缩时候网格是撑满容器的 2. 在容器大于网格面积的时候，调整网格在容器中的位置

align-content    网格在容器内的垂直位置

place-content  justify-content和align-content的合并简写

grid-template: 简写 grid columns, rows, and areas.

grid-gap: 简写 <row-gap> <column-gap>

grid 简写 所有属性，grid: 'area' 是快速写单个area的简便写法

常用简写:

grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: 
            "a a ." minmax(50px, auto)
            "a a ." 80px
            "b b c" auto / 2em 3em auto;


grid: repeat(2, 60px) / auto-flow 80px;

 

子项属性

 

grid-row

gird-column

grid-area

 

justify-self

align-self

gird-row-start

grid-row-end

grid-column-start

grid-column-end

 

详细用法参考：

Grid布局指南

Grid布局方案