网格布局grid
2022-07-29 本文已影响0人
Birdd
- 两种方式
display:grid
display:inline-grid - grid-template-columns
列数 可以定义列宽 auto可以设置等宽和自动填充 - grid-template-row
指定行高 - justify-content
容器内对齐整个网格
space-evenly 整个网格在容器内等分
space-around 圆度左右两端对齐
space-between 元素两端对齐平分容器
start 从容器开始布局
end 从容器结束布局 - align-content
垂直方向对齐容器内得网格
space-evenly 整个网格在容器内等分
space-around 圆度左右两端对齐
space-between 元素两端对齐平分容器
start 从容器开始布局
end 从容器结束布局 - grid-cloumn-gap
列之间宽度 - grid-row-gap
行之间宽度 - grid-gap
间距简写 （行间距，列间距） - grid-column-start 和 grid-column-end
网格从几列开始到几列结束 - grid-row-start 和 grid-row-end
网格从几行开始到几行结束 - grid-column
第几列开始/第几列之前结束 1/5
第几列开始/span 跨几列结束 1/ span 3 - grid-row
第几行开始/第几行之前结束 1/5
第几行开始/span 跨几行结束 1/ span 3 - grid-area
开始行/开始列/结束行前/结束行前
开始行/开始列/跨几行/跨几列
