CSS grid网格布局例子 css

简介 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。flexbox 是一维系统，Grid 是二维系统。Grid 布局远比 Flex 布局强大。
详细学习参考阮一峰的 CSS Grid 网格布局教程
以及饥人谷若愚的 CSS 网格布局学习指南
本文做一些布局记录，方便自己后面回顾。
十二网格分布

.container { display: grid; grid-gap: 10px 10px; grid-template-columns: repeat(12,1fr); background-color: #2196F3; padding: 10px; }

文章图片

容器大小不固定，内部元素固定

.container { display: grid; grid-gap: 10px 10px; grid-template-columns: repeat(auto-fill,100px); background-color: #2196F3; padding: 10px; }

文章图片

左右固定，中间自适应

.container { display: grid; grid-gap: 10px 10px; grid-template-columns: 100px auto 50px; background-color: #2196F3; padding: 10px; }

【CSS grid网格布局例子】

文章图片

一个item占多个网格

.item-1{ grid-column-start:1; //1指的是从左到右的网格线序号 grid-column-start: span 2; //span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。 grid-column-end:4; grid-row-start: 2; grid-row-end: 4; }

.item-1 { grid-column: 1 / 3; //grid-column属性是grid-column-start和grid-column-end的合并简写形式 grid-row: 1 / 2; } /* 等同于 */ .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }

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

需要注意的是container里没有进行网格划分的是没有网格线的。例如：
上面 grid-row-start/end 属性占多排是不会生效的。

文章图片

使用grid-template-areas布局

.container { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "hearder hearder hearder" "nav content content" "nav content content"; background-color: #2196F3; padding: 10px; } .item{ background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item-1{ grid-area: hearder; } .item-2{ grid-area: nav; } .item-3{ grid-area: content; } .item-4{ grid-area: content; }