CSS-Grid布局
grid 网格布局包含： columns, rows , gutter( 行间距，列间距）
grid-template-columns: 创建 columns
To see something that looks more grid-like, we will need to add some columns to the grid. Let's add three 200-pixel columns here. You can use any length unit, or percentages to create these column tracks.
grid-template-columns: 创建 columns
To see something that looks more grid-like, we will need to add some columns to the grid. Let's add three 200-pixel columns here. You can use any length unit, or percentages to create these column tracks.
grid-template-columns: 200px 200px 200px;grid-template-columns: 1fr 1fr 1fr; 1 fr： 1 fraction ： 1份
To create gaps between tracks we use the properties column-gap for gaps between columns, row-gap for gaps between rows, and gap to set both at once.
gap 有时候也被加上前缀grip，保险起见都加上。
gap 有时候也被加上前缀grip，保险起见都加上。
grid-gap: 20px; gap: 20px;
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
}间隔可以是除了fr之外的任何unit。
repeat方法的用法：
grid-template-columns: repeat(3, 1fr);
rows的设置
没有grid-template-rows 因为多少行是有总数/columns数决定的。
grid-auto-rows: 100px; 或者 minmax(100px, auto), 最小和最大的高度。
更加灵活的网格布局设置：可以根据屏幕的宽度自动设置一行摆多少个。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}
阅读量: 639
发布于:
修改于:
发布于:
修改于: