css grid 布局

• #css

Grid 布局相关属性非常多，一个个介绍非常乏味。本文记录一些常见的案例，在实战中逐渐掌握 Grid 布局的使用。

一、实现6列自动换行布局

需求：实现如下布局，一行展示 6 列，列与列之间间隔 20px，行与行之间间隔 20px。

使用 Flex 布局可以实现这个需求，但是需要精确计算每个单元格的宽度。

一行有6列，列与列之间的间距有 5 个，每个间距的宽是 20px，那么 5 个间距的宽就是 5 * 20px，100% - 5 * 20px 就是列的总宽度，总共有 6 列，除以 6 就是每一列的宽度。

如果改成一行有5列，那么计算方式有细微改变。索性将列数与间距提取为 css 变量，让代码更易维护。

<style>
    .wrapper {
        --gap: 20px;
        --column-count: 6;

        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);

        & > div {
            box-sizing: border-box;
            width: calc((100% - (var(--column-count) - 1) * var(--gap)) / var(--column-count));
            border: 1px solid #666;
        }
    }
</style>

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

接下来看下 Grid 布局实现这个需求：

<style>
    .wrapper {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 20px;
        row-gap: 20px;

        & > div {
            border: 1px solid #666;
        }
    }
</style>

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

这里有四个 grid 属性：

• display: grid。声明父容器是 grid 布局
• grid-template-columns: repeat(6, 1fr)。设置总共有几列以及每一列的宽度
  • grid-template-columns: repeat(6, 1fr) 是 1fr 1fr 1fr 1fr 1fr 1fr 的简写，含义是每一列宽度相同
  • grid-template-columns: 100px 1fr 50px; 共有3列，第一列占100px宽度，第三列占50px宽度，第二列占剩余宽度
  • grid-template-columns: 1fr 2fr; 共有2列，第一列占1/3宽度，第二列占2/3宽度
• column-gap: 20px。设置列与列之间的间距是 20px
• row-gap: 20px。设置行与行之间的间距是 20px

二、实现圣杯布局

圣杯布局是页面中最常见的布局，一个页面分为上中下三部分，中间又分为左右两部分。

使用 Flex 布局，html 至少需要三层嵌套。

<style>
    .wrapper {
        height: 100vh;
        display: flex;
        flex-direction: column;

        .header {
            height: 80px;
            background-color:violet;
        }

        .body {
            display: flex;
            flex: 1;

            .nav {
                width: 100px;
                background-color: yellowgreen;
            }
        
            .content {
                flex: 1;
                background-color: azure;
            }
        }

        .footer {
            height: 50px;
            background-color:turquoise;
        }
    }
</style>

<div class="wrapper">
    <header class="header">header</header>
    <div class="body">
        <nav class="nav">nav</nav>
        <main class="content">content</main>
    </div>
    <footer class="footer">footer</footer>
</div>

使用 Grid 布局，html 只要两层嵌套即可。

<style>
    .wrapper {
        height: 100vh;
        display: grid;
        grid-template-areas: 'header header'
                             'nav content'
                             'footer footer';
        grid-template-columns: 100px 1fr;
        grid-template-rows: 80px 1fr 50px;

        .header {
            grid-area: header;
            background-color:violet;
        }

        .nav {
            grid-area: nav;
            background-color: yellowgreen;
        }

        .content {
            grid-area: content;
            background-color: azure;
        }

        .footer {
            grid-area: footer;
            background-color:turquoise;
        }
    }
</style>

<div class="wrapper">
    <header class="header">header</header>
    <nav class="nav">nav</nav>
    <main class="content">content</main>
    <footer class="footer">footer</footer>
</div>

这里有三个 grid 属性：

• grid-template-areas：定义了每个区域的名字
• grid-area: 定义元素属于哪个区域，区域的名字就是在 grid-template-areas 中定义的名字
• grid-template-rows: 定义有多少行一级每一行的高度，grid-template-rows: 80px 1fr 50px 表示总共有三行，第一行高度 80px，第三行高度 50px，第二行填充剩余高度

就圣杯布局这个示例来说，个人觉得 Flex 布局写起来更简单，也更易于理解。

↶ 返回首页