grid布局基本用法_grid用法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58174484/article/details/144927546

使用grid布局可以实现自定义的页面布局，如下图所示：

接下来就举例简单介绍一下grid布局的用法：

前提：

设置父级容器中添加8个子dom做演示（子dom无需设置宽度）：

<div class="outter">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>

1.grid基本效果演示：

ps：先介绍一下grid-template-columns，grid-template-columns中可传递多个参数，其参数的数量决定grid表格布局的列数，如设置为1fr 1fr 1fr即将出现等宽的三列（可参考下方示例）。

首先先在父容器中设置display为grid，然后设置grid-template-columns为1fr（fr为其计量单位）

<div class="outter" style="display: grid; grid-template-columns: 1fr">

下面将举三个例子来说明grid-template-columns：

（1）grid-template-columns为1fr时效果如下图：

（2）grid-template-columns为1fr 2fr时，此时将被分为两列，第一列占1份，第二列占2份，即前两列的宽度比为1：2

<div class="outter" style="display: grid; grid-template-columns: 1fr 2fr">

从上图中可看出两列的宽度比为1：2。

（1）grid-template-columns为200px 1fr，此时左侧列宽度固定为200px，右侧列则为剩余空间的宽度

<div class="outter" style="display: grid; grid-template-columns: 200px 1fr">

2.gap间距：

可以设置各个子dom的间距，由于上面的示例每个子dom我都设置了margin，现将其去掉；之后添加gap观察前后效果：

<div class="outter" style="display: grid;gap:30px; grid-template-columns: 1fr 2fr 1fr;">

gap:30px前后添加效果对比：

3.响应式布局：

举例说明，当用户的设备不同时，其设备的宽度可能会不同，固定的css样式往往不能很好的适配用户的屏幕（如以购物网站为例，用户使用电脑可以一行放下5个商品，而使用手机时一行只能看到2行商品），此时除了使用媒体查询，grid布局也是一个不错的选择：

举例：

<div class="outter" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap:30px;">

这里添加了

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 解释下：

（1）这里repeat可以重复设置grid-template-columns，auto-fill指代默认重复可重复最大次数

如:

grid-template-columns:repeat(5, 1fr);

等同于：
grid-template-columns:1fr, 1fr, 1fr, 1fr, 1fr;

（2）minmax(300px, 1fr)中的minmax方法接收两个参数，分别为最大宽度和最小宽度；这里指代的每列最小宽度不能小于300px

总体效果对比（左侧屏幕宽度为1000px时，右侧屏幕宽度为750px时）：

4.自定义布局：

假设想要实现b站这样的布局效果：

这里需要对第一个子dom进行配置，需指定其宽度占2列，高度占2行，综合位置来看，即：宽度为1-2行，高度1-2列；

这里可以通过grid-column，grid-row与设置所占的行与列：

grid-column1/3：指从第一行开始到第三行结束（不包括第三行）这里的斜杠只是分隔符，并非指代分数。grid-row1/3：同理指代第一列开始到第三列结束，即1~2列（不包括第三列）

<div class="box" style="grid-column: 1/3;grid-row: 1/3;">1</div>

效果：

(ps：grid-column，grid-row 分别是 grid-column-start 、grid-column-end 、grid-row-start 、 grid-row-end 属性的简写)

代码整体参考：

<body>
    <div class="outter" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap:30px;">
        <div class="box" style="grid-column: 1/3;grid-row: 1/3;">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
    </div>
</body>
<style>
    .outter {
        width: 50%;
        height: 800px;
        border: 1px solid #000;
    }
    .box {
        background-color: darkseagreen;
        border-radius: 16px;
        align-items: center;
        justify-content: space-around;
        display: flex;
        font-size: larger;
    }
</style>

5.自定义练习

看到这里了，可以通过（grid-column，grid-row）尝试实现下列效果：

参考代码：

<body>
    <div class="outter" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap:30px;">
        <div class="box" style="grid-column: 1/3;grid-row: 1/3;">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box" style="grid-column: 5/6;grid-row: 1/3;">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box" style="grid-column: 5/6;grid-row: 5/6;">11</div>
        <div class="box" style="grid-column: 2/3;grid-row: 4/5;">12</div>
    </div>
</body>
<style>
    .outter {
        width: 50%;
        height: 800px;
        border: 1px solid #000;
    }
    .box {
        background-color: darkseagreen;
        border-radius: 16px;
        align-items: center;
        justify-content: space-around;
        display: flex;
        font-size: larger;
    }
</style>

希望本位会对您有所帮助~ ^_^