栅格布局组成：
wrapper（父元素）和 items（子元素）。
父 属性设置:
display: grid;或display: inline-grid; /*网格模式*/grid-template-columns: 40px auto 50px; /*子元素列的宽度*/grid-template-rows: 25% 100px auto; /*子元素行的高度 设置则定高 不设则自适应*//*他们俩可设置是px 百分比 也可以自动伸缩auto*/grid-gap: 5px; /*网格区域的间距 可设置单一间距 也可以上下一个间距左右一个间距 。 不支持上右下左四个值写法*/子 属性设置:
不设置一下值是 默认均分。 更多变化 需要用到⤵️
grid-row-start: 2; /*行 的开始*/grid-row-end: 3; /*行 的结束*//*上面两句可简写成 grid-row: 2 / 3;*/grid-column-start: 1; /*列 的开始*/grid-column-end: 4; /*列 的结束*//*同理上面两句可简写成 grid-column: 1 / 4;*/------------更简洁写法-----------------------grid-row-start: 2; /*行 的开始*/grid-row-end: 3; /*行 的结束*/grid-column-start: 1; /*列 的开始*/grid-column-end: 4; /*列 的结束*//*上面四句可简写成*/grid-area:2/1/3/4; /*顺序grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/
理解row和columns的排序 基本就理解grid的用法
例如：
grid-row-start: 2； 指的是从上到下第二条线开始
grid-column-start: 1; 指的是从左到右第一条线开始
DEMO：
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="full-screen"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="format-detection" content="telephone=no" /><title>Grid</title><style type="text/css"> .parentBox { display: grid; grid-gap: 5px; /*网格区域的间距 可设置单一个间距 也可以上下一个间距左右一个间距 。 不支持上右下左四个值写法*/ margin-bottom: 30px; } .parentBox div{ color: #fff; border: 2px solid #607D8B; justify-content: center; align-items: center; display: flex; } /*-------------------------*/ .wrapper { grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } /*-------------------------*/ .wrapper1 { grid-template-columns: 30% auto 30px; /*子元素列的宽度 */ grid-template-rows: 50px 50px; /*子元素行的高度 设置了则定高度 自己适应*/ } /*-------------------------*/ .wrapper2 { grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; margin-bottom: 30px; } .wrapper2 .item_1{ grid-column-start: 1; grid-column-end: 4; } .wrapper2 .item_4{ grid-row-start: 2; grid-row-end: 4; grid-column-start: 3; grid-column-end: 4; } /*-------------------------*/ .wrapper3{ grid-template-columns: 100px 100px 100px; /*子元素列的宽度*/ grid-template-rows: 50px 50px; /*子元素行的高度 设置了则定高度 自己适应*/ } .wrapper3 .item_1{ grid-area: 1 / 4 / 1 / 1; /*grid-area是grid-row和grid-column的简写。顺序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/ } .wrapper3 .item_4{ grid-area: 2/3/4/4; /*grid-area是grid-row和grid-column的简写。顺序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。*/ /*row 开始 /column 开始/ row 结束 /column 结束*/ }</style></head><body> <p>均分</p> <div class="parentBox wrapper"> <div class="item_1" style="background-color: #FF5722">1</div> <div class="item_2" style="background-color: #ff9800">2</div> <div class="item_3" style="background-color: #FFC107">3</div> <div class="item_4" style="background-color: #CDDC39">4</div> <div class="item_5" style="background-color: #8BC34A">5</div> <div class="item_6" style="background-color: #4CAF50">6</div> </div> <p>x:30% auto 30px</p> <div class="parentBox wrapper1"> <div class="item_1" style="background-color: #FF5722">1</div> <div class="item_2" style="background-color: #ff9800">2</div> <div class="item_3" style="background-color: #FFC107">3</div> <div class="item_4" style="background-color: #CDDC39">4</div> <div class="item_5" style="background-color: #8BC34A">5</div> <div class="item_6" style="background-color: #4CAF50">6</div> </div> <p>grid-row grid-column</p> <div class="parentBox wrapper2"> <div class="item_1" style="background-color: #FF5722">1</div> <div class="item_2" style="background-color: #ff9800">2</div> <div class="item_3" style="background-color: #FFC107">3</div> <div class="item_4" style="background-color: #CDDC39">4</div> <div class="item_5" style="background-color: #8BC34A">5</div> <div class="item_6" style="background-color: #4CAF50">6</div> </div> <p>更简约写法grid-area</p> <div class="parentBox wrapper3"> <div class="item_1" style="background-color: #FF5722">1</div> <div class="item_2" style="background-color: #ff9800">2</div> <div class="item_3" style="background-color: #FFC107">3</div> <div class="item_4" style="background-color: #CDDC39">4</div> <div class="item_5" style="background-color: #8BC34A">速度快圣诞节看电视剧圣</div> <div class="item_6" style="background-color: #4CAF50">速度快圣诞节看电视剧圣诞节看电视剧考虑到</div> </div></body></html>mark一下 仅供参考 欢迎更正补充 end