CSS学习笔记13——grid布局

grid布局

grid——网格式布局

• 示例

.wrapper {margin:60px;display:grid;       /*声明一个容器*/grid-template-columns: repeat(3,200px);  /*声明列的宽度*/grid-gap:20px;    /*声明行间距和列间距*/grid-template-rows: 100px 200px  /*声明行的高度*/
}

列宽

repeat()函数

简化重复的值。

• 第一个参数是重复的次数，第二个参数是要重复的值。

auto-fill关键字

自动填充。

grid-template-columns:repeat(auto-fill,200px)
/*表示列宽200px,列的数量不固定，可以自动填充*/

fr关键字

fr单位代表网格容器中可用空间的一等份

grid-template-columns:200px 1fr 2fr;
/*第一列200px，后面剩余宽度分为两部分，宽度为剩余宽度的1/3，2/3*/

minmax()函数

给网格元素一个最小和最大的尺寸

grid-template-columns:1fr 1fr minmax(300px,2fr)
/*第三列宽最少300px,最大不能大于第一第二列宽的两倍*/

auto关键字

由浏览器决定长度

grid-template-columns:100px auto 100px;
/*表示第一三列为100px，中间由浏览器决定*/

间距

• grid-row-gap设置行间距
• grid-column-gap设置列间距
• grid-gap以上两者的简写形式

单元格位置

• justify-items设置单元格内容水平位置
• align-items设置单元格垂直位置

justify-items: start|end|center|stretch;
align-items: start|end|center|stretch;

网格线

• grid-column-start左边框所在垂直网格线
• grid-column-start右边框所在垂直网格线
• grid-row-start上边框所在水平网格线
• grid-row-end下边框所在水平网格线