几个简单例子学会 grid 布局

gridcss

2023-10-03 20:22:51

目前来说最常见的布局是flex布局，但是实际上flex只能横向或者纵向布局。但对于实际的用于需求当中，使用最多的是二维上的排版，无论是纵向还是横向都有很多需求。这里尽量用简单的例子来说明复杂的需求。

响应式布局

先演示一个常见的混合布局，进行这个布局，如果使用flex，会首先上下，再左右布局。

加入左侧的导航栏需要在某个宽度范围内进行大小适配，那么难度还是比较大的。

代码如下：

↓ 会员用户可见内容 ↓

html 复制代码

<head>
    <style>
        body {
            margin: 0;
        }

        /* 关键代码 */
        .layout {
            display: grid;
            /* 表示第一行56px，第二行300px */
            grid-template-rows: 56px 300px; 
        }
         /* 关键代码 */
        .layout .layout-main {
            display: grid;
            /* 表示第一列180px 到 25%的宽度，至少180px，最大25%，第二列占据剩余空间。 */
            grid-template-columns: minmax(180px, 25%) 1fr; 
        }


        .layout .layout-top {
            background-color: goldenrod;
        }

        .layout .layout-main aside {
            background-color: gold;
        }

        .layout .layout-main main {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="layout">

        <div class="layout-top"></div>
        <div class="layout-main">
            <aside></aside>
            <main></main>
        </div>
    </div>
</body>

这里不难看出，除了颜色的代码之外，grid布局实现这个排版只用了简单两个CSS样式。
这里简单解释下这些配置的意思：

grid-template-columns，表示横向列的配置，有多少列，就写多少列的宽度。
grid-template-rows，表示纵向的配置，有多少行，就写多少行的范围。
minmax，是专门用于grid布局的一个函数，表示最小宽度或高度，在grid-template-rows使用是高度，在grid-template-columns使用表示宽度范围。
fr，这里看到一个不常见的单位，他是一个等分的单位。例如grid-template-columns: 1fr 1fr 1fr，表示等分为三列，grid-template-columns: 180px 1fr表示第一列180px，第二列占据剩余的所有空间。

看懂了上边的代码，grid布局已经掌握了，接下来，看看其它的例子。

布局间隔

页面间隔在工作中也很常见，比如两个块之间左右空余16px，上下空余12px，在flex布局当中可以用到gap这个关键字。其实这个关键字在grid布局当中同样适用。

比如实现一个简单的9宫格的布局

代码如下

↓ 会员用户可见内容 ↓

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            row-gap: 10px;
            column-gap: 10px;
            /* 也可以间歇 gap: 10px; */
        }


        .container div {
            border: 3px dashed goldenrod;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

自由布局

很多时候，布局不是那么的规整，可能一个页面多个格子，大小都不同。可能需要合并某一行或者某一列

例如下面这种形式：

代码如下：

↓ 会员用户可见内容 ↓

html 复制代码

<head>
    <style>
        body {
            margin: 0;
        }

        .container {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 10px;
            column-gap: 10px;
            /* 也可以间歇 gap: 10px; */
        }


        .container div {
            border: 3px dashed goldenrod;
            min-height: 100px;
        }

        .container .column1 {
            /* 表示横向从第一个轨道到第三个轨道 */
            grid-column: 1/3; 
        }

        .container .column2 {
            /* 表示横向从第一个轨道 数两个格子 */
            grid-column: 1/ span 2;
        }

        .container .row {
            /* 表示纵向从第一个轨道到第三个轨道 */
            grid-row: 1/3;
            /* 表示横向从第三个轨道到第四个轨道 */
            grid-column: 3/4;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column1"></div>
        <div class="column2"></div>
        <div class="row"></div>
    </div>
</body>

这里面涉及到了轨道的概念，对于一个网格而言，边上的线条就是网格线了，官方的名字叫做轨道。轨道有纵向的轨道，也有横向的轨道。
grid-row表示横向的轨道，grid-row: 1/3表示从第一横的轨道到第三横的轨道合并，组成一个格子。span是一个关键字，表示网格。1 / span 2表示从第一个网格线开始数，跨越两个格子。和1/3的效果相同。grid-column表示纵向的轨道，其他的意思和grid-row相同