css Grid布局: 浏览器开启css Grid Layout
css Grid布局: 合并单元格布局 -- 例子有些属性支持的不好,有些可以优化,请自行思考解决
css Grid 系列(下) - 使用Grid布局构建网站首页
1、单元格的布局
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column: start / end
grid-row: start / end
2、网格区域
grid-area: row-start / column-start / row-end / column-end
3、在CSS Grid Layout中具有独立的源(文档流),实现任何布局效果,完全不需要考虑文档流结构的先后顺序,
只需要根据设计需求,调整网格单元格位置。
4、在CSS Grid Layout中盒模型大小计算变成:
容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width
5、grid-auto-flow 默认row,设置为column时,网格中的单元将会按列显示。
6、
grid-gap: <grid-row-gap> <grid-column-gap>
如果只设置一个值,那么grid-column-gap 和 grid-row-gap都为那个值
justify-items: start | end | center | stretch(默认) ;
垂直于列网格线对齐,适用于网格容器里的所有网格项。属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。
align-items: start | end | center | stretch ;
垂直于行网格线对齐,适用于网格容器里的所有网格项。
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。