grid布局
网格布局,顾名思义,方方正正的格子都用它布局😊
常见属性
网格容器属性:grid,grid-template-columns,grid-auto-rows,gap...
网格子元素属性:grid-row,grid-column,grid-area
属性 | 解释 | 人话 |
---|---|---|
grid | 更改容器的流布局为网格 | 容器切换到网格布局模式 |
grid-template-columns | 网格中列的总数量 | 竖着一共排几列 |
grid-template-rows | 网格中行的总数量 | 横着一共排几行 |
grid-auto-rows | 预设网格每行的高度 | 容器的每行多高【未设置总行数时生效】 |
grid-auto-columns | 预设网格每列的宽度 | 容器的每列多宽【未设置总列数时生效】 |
grid-template-areas | 预设网格每一个子元素位置 | 手动一个一个排网格项【必须是矩形】 |
grid-area | 网格元素按网格行线设置大小时使用的名字 | 给网格每个子元素起个名字【配合grid-template-areas用的】 |
grid-row | 网格元素按网格行线设置大小 | 指定定网格元素具体占几行【类似表格纵向合并】 |
grid-column | 网格元素按网格列线设置大小 | 指定定网格元素具体占几列【类似表格横向合并】 |
布局方案
使用grid布局的三个常见场景,掌握以下三个即可掌握grid布局【重要‼️‼️】
-
方正无缺、大小相同:
直接设置grid-template-columns【见:九宫格方案】
-
方正无缺、大小不同:
类似表格合并,设置grid-row、grid-column【见:网格线方案】
-
不正有缺、大小不同:
排列无规律,且有缺角。设置grid-template-areas【见:网格区域方案】
常见用法
一、九宫格
<div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div><div class="box box6">6</div><div class="box box4">7</div><div class="box box5">8</div><div class="box box6">9</div></div>
.box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;grid-auto-rows: 100px;}
二、三栏布局
- 网格线方案
<div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
.box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(10, 50px);gap: 20px;}.box1{grid-column: 1 / -1;}.box2{/* 不设置总行数无法使用-1 */grid-row: 2 / -1; }.box3{grid-column: 2 / -1;grid-row: 2 / -1;}
- 网格区域方案
<div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
.box{outline: 1px solid #000;}.container{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 150px);gap: 20px;/* 三行两列 */grid-template-areas: 'a a a''b c c''b c c';}.box1{grid-area: a;}.box2{grid-area: b;}.box3{grid-area: c;}
详情参考:CSS布局网格