CSS Grid网格布局详解于应用

什么是Grid网格布局？

网格是由一系列水平及垂直的线构成的以一种二维空间布局模式。

常用相关术语

1.网格容器: Grid Container 由若干个矩形网格单元构成

2.网格项目: Grid Item 网格容器的子元素,必须放在网络单元中

3.网格单元: Grid Cell有”单元格”和”网格区域”二种表现形式

4.网格轨道: Grid Track 由多个网格单元组成,根据排列方向有”行轨”和”列轨”之分

5.轨道间距: gap 容器中轨道之间的间距,有”行轨间距”,”列轨间距

6.新单位: fr 设置轨道宽高时用的单位: fr (fraction),类似flex中的伸缩因子

7.隐式轨道: 行高 grid-auto-rows 列宽 grid-auto-columns

8.网格区域: grid-area 设置任何一个项目所在的网格单元的区域. ( 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 )

9.排列方向: grid-auto-flow: row水平排列 column垂直排列

10.函数: repeat()重复使用多个数值 和 minmax()两个参数，分别为最小值和最大值。

---

网格GRID例子如下

css代码

display: grid;设置为网格容器

grid-template-columns: 1fr 2fr 1fr; 共3列 第2列是1和3的两倍宽度

grid-template-rows: 6em 6em; 共两行 每行高度6em

gap: 0.5em; 行和列的间隙是0.5em

.container {
        /* */
        background-color: lightblue;
        padding: 0.5em; 
        display: grid;/
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 6em 6em;
        gap: 0.5em;
    }

HTML代码

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

演示图

---

item4 显示第一区域

.item:nth-of-type(4) {
        background-color: lightpink;
        grid-area: 1 / 1 / 2 / 2; /* 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
    }

item4 显示第一区域且占用2列

.item:nth-of-type(4) {
        background-color: lightpink;
        grid-area: 1 / 1 / 2 / 3; /* 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
    }

item6 超出两行排列 形成隐式轨道,让我们设置它的高度为10em

.container {
        grid-auto-rows: 10em;
    }