什么是Grid

基于行与列的二维空间布局

网格容器

由若干个矩形网格单元构成；
使用了属性display: grid就是网格容器；
默认是块元素；

网格单元

单元格|网格区域

网格项目

网格容器中的子元素就是网格项目；
默认生成1行N列的容器（N就是项目的数量）

网格轨道

由多个网格单元组成
轨道就是行和列
设置列 grid-template-columns :
设置轨道的行高 grid-template-rows :

轨道间距

容器中轨道之间的间距；
轨道间距 gap ：水平垂直；

实现一个简单俩列三行

    <style>
        .container {
            display: grid;
            border: 1px solid #ccc;
            grid-template-columns: 10em 10em;
            grid-template-rows: 2em 2em 2em;
        }
        .item {
            background-color: aquamarine;
            border: 1px solid #ccc;
        }
    </style>
<body>
    <div class="container">
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
        <span class="item">4</span>
        <span class="item">5</span>
    </div>
</body>

效果图

网格单元尺寸单位：fr

设置轨道列宽的可以使用fr 响应式

fr与auto的区别

auto默认是适应，fr可以实现对应的倍数等
比如3行2列时中间一列是左右俩列的2倍宽，auto就无法实现，fr可以实现：grid-template-columns: 1fr 2fr 1fr;

fr和%的区别

%无法计算列边距，会出现内容超出，如果使用%,则需要关闭gap间距；
%可以与fr共存，计算方式：总宽度-%的宽度，将剩下的分配给fr

总结：auto 、fr 、%都是相对单位，都可以触发自动计算，尽量不要同时出现。

fr与其他单位混合：em、px等

px、em是固定值，计算时要减去固定值，将剩下的空间在fr之间分配；
grid-template-columns: 1em 2fr 3fr;

设置网格单元尺寸的常用函数

repeat()
重复：grid-template-columns: 1em 1em 1em;可以写成grid-template-columns: repeat(3,1em);
混合使用grid-template-columns: repeat(3,1fr) 2fr; 1fr 1fr 1fr 2fr;
minmax()最大最小值，grid-template-columns: 1fr minmax(5em,10fr) 1fr;
适用于局部响应式；

隐式轨道

声明的网格单元数量与网格项目不匹配时，多余的网格单元称为隐式轨道
隐式轨道也是可以控制的；
控制排列方式：grid-auto-flow: row|columns;
行优先时使用grid-auto-rows设置行高
列优先时使用grid-auto-columns设置列宽

网格项目的显示顺序

默认是按照书写顺序排列，可以自定义排序；
行号，列号：从左上角开始(1,1)递增；
属性grid-area: 行起始编号 / 列起始编号 /行结束编号 /列结束编号；
grid-area 参数不同意义不同
1、值中有span
单值：跨越的行数
双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto）；
2、值中有span和编号
双值：没有span 默认跨一行一列，
三值：省略了列结束编号或跨的数量，此时前面的值可以使用auto

 <style>
        .container {
            display: grid;
            border: 1px solid #ccc;
            /* 轨道列宽 */
            grid-template-columns: repeat(3, 1fr);
            /* 行高 */
            grid-template-rows: 2em 2em;
            /* 间距 */
            gap: .2em;
        }
        .item {
            background-color: aquamarine;
            border: 1px solid #ccc;
        }
        .item:nth-of-type(5) {
            background-color: bisque;
            grid-area: 1 / 1 / 2 / 2;
            /* 跨一行时可以简写 */
            grid-area: 1 / 1;
        }
        .item:first-of-type {
            background-color: brown;
            grid-area: span 1 /span 3;
        }
    </style>
<body>
    <div class="container">
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
        <span class="item">4</span>
        <span class="item">5</span>
        <span class="item">6</span>
    </div>
</body>

效果图

grid快速实现圣杯布局

<!-- 优先主体内容 -->
    <style>
        body {
            display: grid;
            grid-template-columns: 15em minmax(50vh, auto) 15em;
            grid-template-rows: 3em minmax(80vh, auto) 3em;
            gap: .5em;
        }
        body * {
            border: 1px solid #ccc;
        }
        footer,
        header {
            grid-area: span 1 /span 3;
        }
        main {
            grid-area: 2 / 2;
        }
    </style>
<body>
    <header>header</header>
    <main>main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <footer>footer</footer>
</body>

效果图

grid的基础知识