grid布局grid-template-columns和grid-template-rows、repeat函数、间距、排列方式

grid 布局的简单介绍

要使用grid布局,我们需要给一个容器元素(父级容器)加上display:grid。
这会让这个元素成为一个grid容器。
而容器的直接子元素会成为grid项目。
例如：container就是grid容器，item就是grid项目。

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
</div>
.container{
    display: grid;
    border: 2px solid red;
}

grid-template-columns

grid-template-columns 可以显示设置我们的布局包含多少列。
我们传入的每一个数据值代表1列的宽度。
grid-template-columns: 140px 150px表示如下：
设置了2列，第一列的宽度140px;第2列宽度150px

关于 grid-template-columns 的单位

除了使用px;我们还可以使用fr来灵活地定义行与列的大小。
他是grid布局的专用单位。代表了容器可用空间的一份。

grid-template-columns: 1fr 1fr 1fr;表示：
我们设置了3列，第1,2,3列占用[可用空间]的1份。

grid-template-columns: 1fr 2fr 3fr;
我们设置了3列，第1列占用[可用空间]的1份。第2列占用2份，第3列占用3份。
这个时候你会发现我们的列宽不在固定，而是根据父容器的大小而发生变化。

grid-template-columns: 1fr 2fr 3fr的简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: grid;
            border: 2px solid red;
            grid-template-columns: 1fr 2fr 3fr;
        }
        .item{
            background: pink;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
    </div>
</body>
</html>

01

px和fr的搭配使用

第一列固定150px,第2列占可用空间的1份，第2列占用2份

.container{
    display: grid;
    border: 2px solid red;
    // 第一列固定150px,第2列占可用空间的1份，第2列占用2份
    grid-template-columns: 150px 1fr 2fr;
}

grid-template-columns 和 grid-template-rows的取值

可以是 %; px; fr; 以及其他单位

minmax()函数

有时我们希望把列的宽度限制在某个范围内,这时可以使用minmax函数。
这是一个grid布局的专用函数。
这以为着第一列的宽度是弹性的。
minmax(150px, 1fr)表示宽度不会窄于150px,不会宽于1份可用空间
换一句话说：最小值150px,最大值1ff。宽度在这个范围内变化。

.container{
    display: grid;
    border: 2px solid red;
    // 第一列的宽度不会窄于150px,不会宽于1份可用空间
    grid-template-columns: minmax(150px, 1fr) 1fr 2fr;
}

定义多列宽度相同时 repeat()函数

.container{
    display: grid;
    border: 2px solid red;
    // 定义3列，每列的宽度是150px
    grid-template-columns: repeat(3, 150px);
}

grid-template-rows: repeat(2, 300px)

定义布局包含2行，每一行的高度是300px

.container{
    display: grid;
    border: 2px solid red;
    //布局3列，每一列的宽度是150px
    grid-template-columns: repeat(3, 150px);
    // 布局包含2行，每一行的高度是300px
    grid-template-rows: repeat(2, 300px);
}

哪些没有设置样式的元素会怎么样？

有的小伙伴会问：如果我有9个元素。

grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(2, 300px);

现在的代码。在高度上只有前面6个元素高度是300px，剩下的3个元素高度会怎么样呢？
答：剩下的元素的高度为默认高度(有内容撑开)

项目(子元素)的margin会影响子元素的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: grid;
            border: 2px solid red;
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(2, 300px);
        }
        .item{
            background: pink;
            /* 子元素设置了margin,那么子元素的宽150 - 10; 高度：300-10*/
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>
</body>
</html>

02
啥要设置margin呢？因为我想让元素与元素之间有间距。
其实除了margin可以让元素产生间距，还可以设置gap
gap：可以让行与行之间，列与列之间产生间距。并且不会影响元素的宽高

gap: 10px;行与行之间，列与列之间产生间距10px

创建布局间的间距时，推荐使用gap

.container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(2, 300px);
    /* 可以让行与行之间，列与列之间产生间距10px */
    gap: 10px;
}
.item{
    background: pink;
}

03

gap: 10px(行间距) 20px(列间距)

表示行与行之间间距10px;列与列之间产生间距20px
第1行与第2行间距10px(垂直方向间距);
第1列与第2列间距20px(水平方向间距)

.container{
    display: grid;
    border: 2px solid red;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(2, 300px);
    /* 表示行与行之间间距10px;列与列之间产生间距20px */
    /* 垂直方向上的间距和水平反向上的间距 */
    gap: 10px 20px;
}

04

repeat函数中的自动填充 auto-fil

auto-fil会将列数的宽度按照30%的宽度进行划分; 放不下的话则不在划分列数;
右侧的10%区域，容纳不下30%的宽度，就不会在进行划分。
右侧的10%会出现留白。

 .container{
    display: grid;
    border: 2px solid red;
    /* 分成3行，每一行的高度100px */
    grid-template-rows: repeat(3, 100px);
    /* auto-fil会将列数的宽度按照30%的宽度进行划分; 放不下的话则不在划分列数 */
    grid-template-columns: repeat(auto-fit, 30%);
}

A05

 .container{
    display: grid;
    border: 2px solid red;
    /* 分成3行，每一行的高度100px */
    grid-template-rows: repeat(3, 100px);
    /* auto-fil会将列数的宽度按照20%的宽度进行划分; 放不下的话则不在划分列数 */
    grid-template-columns: repeat(auto-fit, 20%);
}

A06

auto取值

.container{
    display: grid;
    border: 2px solid red;
    /* 分成3行，第1行高度100px,第2行的高度自动填充剩余的高度，第3行高度是100px */
    grid-template-rows: 100px auto 100px;
    /* 第1列的宽度自动填充剩余的宽度，第2列宽度100px,第3列的宽度100px */
    grid-template-columns:auto 100px 100px ;
}

A07

行间距和列间距

行间距 grid-row-gap:10px
列间距 grid-column-gap:10px
以上代码复杂可以进行简写
grid-gap: 行间距20px 列间距30px
A08

.container{
    display: grid;
    border: 2px solid red;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns:100px 100px 100px ;
    grid-gap: 20px 30px;
}
.item{
    background-color: aqua;
}

A09

设置横排列或者列排列

grid-auto-flow属性有两个取值，分别为
row:横向显示
column:纵向显示

 .container{
    display: grid;
    border: 2px solid red;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns:100px 100px 100px ;
    grid-gap: 20px 30px;
    /* 元素纵向排列 */
    grid-auto-flow: column;
}

A10

posted @ 2026-09-08 16:31  南风晚来晚相识  阅读(0)  评论(0)    收藏  举报