Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。
1.容器—有容器属性(container)
2.项目—有项目属性(items)
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
grid-template-columns:repeat(3,100px); //同上
grid-template-columns: repeat(auto-fill,100px);
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份 效果如下图
grid-template-columns: 1fr minmax(150px,1fr); // 第一个参数最小值,第二个最大值
grid-template-columns: 100px auto 100px;
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
同上
row-gap:20px;
column-gap:20px;
gap:20px 20px;
grid-auto-flow:row|column| row dense
子元素 默认的放置顺序是"先行后列".即先填满第一行,再开始放入第二行(就是子元素的排放顺序)
justify-items:start|end|center|stretch
place-items: 水平 垂直;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; //水平方向
align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 垂直方向
place-content:水平 垂直;
grid-auto-rows: 50px;
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
网格线定位用,3列4根线
grid-column-start:1;
grid-column-end:3;
网格线1-3 所以占2个格子
grid-column-start:1;
grid-column-end:3;
简写形式1:grid-column:1/3;
简写形式2:grid-column:span 2;
grid-template-areas: 'a a a''b c c''d d e';
.item-1 {
grid-area: a;
}
.item-2 {
grid-area: c;
}
和justify-items一样
place-self :center center;
原文链接
作者:雨溪滩
链接:https://www.jianshu.com/p/3762f214cd6f
来源:简书