Loading

CSS Grid布局 速查表

grid概念

  • 容器和项目：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
  • 行和列：容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
  • 行和列的交叉区域，称为"单元格"（cell）
  • 网格线：划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

grid布局特有长度单位

单位 解释
fr 相对比例数
minmax(min,max) 尺寸范围，表示此范围内的宽度都可接受
repeat(重复次数，重复内容) 重复
auto-fill 只能在repeat函数中使用，自动填充(多余时用空格子填满剩余宽度)
auto-fit 只能在repeat函数中使用，自动填充(多余时尽量扩大单元格宽度)
fit-content(argument) min(max-content , max(auto,argument) )

容器属性

名称 解释
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高
column-gap 设置列与列的间隔（列间距）
row-gap 设置行与行的间隔（行间距）
gap grid-column-gap和grid-row-gap简写形式
grid-template-areas 指定区域
grid-auto-flow 顺序
align-items 设置单元格内容的垂直位置
justify-items 设置单元格内容的水平位置
place-items align-items和justify-items简写形式
align-content 设置整个内容区域的垂直位置
justify-content 设置整个内容区域在容器里面的水平位置
place-content align-content和justify-content简写形式
grid-auto-columns 设置多余（隐形）网格列宽
grid-auto-rows 设置多余（隐形）网格高度
grid-template 不建议使用。grid-template-rows、grid-template-columns、grid-template-areas简写形式
grid 不建议使用。grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow简写形式

项目属性

名称 解释
grid-column-start 指定左边框所在的垂直网格线，可使用span从左往右合并单元格
grid-column-end 指定右边框所在的垂直网格线，可使用span从右往左开始合并单元格
grid-row-start 指定上边框所在的水平网格线，可使用span从上往下合并单元格
grid-row-end 指定下边框所在的水平网格线，可使用span从下往上合并单元格
grid-column grid-column-start和grid-column-end简写形式，使用/分隔
grid-row grid-row-start和grid-row-end简写形式，使用/分隔
grid-area 指定项目放在哪一个区域。也可作为grid-row-start、grid-column-start、grid-row-end、grid-column-end简写形式
align-self 设置单元格内容的垂直位置
justify-self 设置单元格内容的水平位置
place-self align-self和justify-self简写形式

代码示例

grid-template-columns

grid-template-columns: 100px 100px 100px;

grid-template-columns: repeat(3, 100px);

grid-template-columns: repeat(2, 100px 20px 80px);

grid-template-columns: repeat(auto-fill, 100px);

grid-template-columns: 1fr 1fr;

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

grid-row-gap

grid-row-gap: 20px;

grid-template-areas

grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

grid-auto-flow

grid-auto-flow: column;

grid-auto-flow: row dense;

justify-items

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

justify-content

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

grid-column-start

.item-1 {
  grid-column-start: 1;
}

.item-1 {
  grid-column-start: header-start;
}

.item-1 {
  grid-column-start: span 2;
}

grid-column

.item-1 {
  grid-column: 1 / 3;
}

使用参考

posted @ 2024-08-20 16:03  碌云  阅读(83)  评论(0)    收藏  举报