开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十二天,点击查看活动详情

深入解析CSS(第N天)

grid布局续篇

上一篇文章我们讲解了grid布局的基本使用,和一些常见的属性用法,接下来这篇文章主要讲解一些不常见的属性,但是却有必要学的

grid属性

grid-template-areas和grid-area

这两个属性基本上用于定义区域,一个区域可能由一个或者多个单元格组成,用处必然就会想到一些场景,例如合并单元格

<div class="wrapper">
        <div class="one item sidebar">One</div>
        <div class="two item header">Two</div>
        <div class="three item header">Three</div>
        <div class="four item sidebar">Four</div>
        <div class="five item content">Five</div>
        <div class="six item content">Six</div>
    </div>
    <style>
        .wrapper {
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            /*  声明列的宽度  */
            grid-template-columns: 100px 100px 100px;
            grid-template-areas:
                "sidebar .  header"
                "sidebar content content";
            /*  声明行间距和列间距  */
            grid-gap: 20px;
            /*  声明行的高度  */
            grid-template-rows: 50px;
        }

        .sidebar {
            grid-area: sidebar;
        }

        .content {
            grid-area: content;
        }

        .header {
            grid-area: header;
        }

        .one {
            background: #19CAAD;
        }

        .two {
            background: #8CC7B5;
        }

        .three {
            background: #D1BA74;
        }

        .four {
            background: #BEE7E9;
        }

        .five {
            background: #E6CEAC;
        }

        .six {
            background: #ECAD9E;
        }

        .item {
            text-align: center;
            font-size: 200%;
            color: #fff;
        }
    </style>

. 符号代表空的单元格，也就是没有用到该单元格。

grid-auto-flow

这个其实和flex布局中的flex-direction一样都是控制布局方式,grid-auto-flow精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行

justify-items 、align-items 以及 place-items

这些基本上也和flex中的属性差不多吧,所以就不多说了,直接演示吧

grid-auto-columns 和 grid-auto-rows

在理解这二个属性前必须要理解一下二个隐式和显示网格

显示网格

我们通过 grid-template-columns 和 grid-template-rows 创建出来的轨道，

隐式网格

但是这些轨道不一定能容纳所有的网格项目, 浏览器根据网格项目的数量计算出来需要更多的轨道, 就会自动生成新的轨道来容纳多出来的网格项目, 而这些自动生成的轨道被称为隐式网格（轨道）。

本来我们是有6个元素,但是我们在设置时只设置了二行二列,必然会超出一行,而超出的一行也就是我们所说的隐式网格,我们根据grid-auto-rows设置为200px,根据结果图我们就很明显的看出来了

响应式布局

我们在上一篇文章讲述过fr,它可以实现单位等分,可以将可用空间分成多个等分空间,在很多场景中都可以使用fr,但是我们有时去看一些网站的列表,会发现一个很明显的特点就是根据空间大小自动划分每行每列的数量

repeat + auto-fit——固定列宽，改变列数量

上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列

常见问题

右侧空白

我们在使用grid有时会发现右侧会出现空白,这个肯定不是我们想看到的,如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分。

空缺问题

有时我们会接到这个需求,每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。