CSS Grid详解

V。on

已于 2023-02-17 10:05:43 修改

阅读量2.6k

点赞数 3

分类专栏： css 文章标签： css 前端 html

于 2022-06-29 11:54:48 首次发布

本文链接：https://blog.csdn.net/qq_40864647/article/details/125515076

版权

css 专栏收录该内容

32 篇文章 6 订阅

订阅专栏

CSS Grid

首先，这是基本的样式及html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            display: grid;
        }

        .item:nth-child(1) {
            background-color: red;
        } 

        .item:nth-child(2) {
            background-color: orange;
        }

        .item:nth-child(3) {
            background-color: yellow;
        }

        .item:nth-child(4) {
            background-color: green;
        }

        .item:nth-child(5) {
            background-color: greenyellow;
        }

        .item:nth-child(6) {
            background-color: blue;
        }

        .item:nth-child(7) {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

得到如下效果：
在这里插入图片描述
此时给最外层元素添加了display: grid;属性，但是，这还没有做任何事情，因为我们还没有定义我们希望我们的网格看起来如何。

列与行

为了使它成为二维的，我们需要定义列和行。让我们创建三列和两行。我们将使用grid-template-column（定义列的宽度）以及grid-template-row（定义行高）属性。

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

这些值决定了我们希望列的宽度（100px）和行的高度（50px）。结果如下：
在这里插入图片描述
我们还可以使用repeat属性，它可以让代码看起来更整洁。它将会得到和上图一样的效果。
grid-template-columns: repeat(2, 100px 50px);等同于grid-template-columns: 100px 50px 100px 50px;

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

我们尝试使用其他的像素值

.container {
    display: grid;
    grid-template-columns: 200px 100px 100px;
    grid-template-rows: 100px 50px;
}

得到如下效果：
在这里插入图片描述

我们定义一个3x3的网格

.container {
    display: grid;
    grid-template-columns: 200px 100px 100px;
    grid-template-rows: 100px 50px 50px;
}

效果如下：
在这里插入图片描述
如果按照以上，我们定义为3x3的网格，会发现和上一例子的效果是一样的。这是因为我们只有六个项目来填充网格。如果我们还有三个，那么最低行也会被填满。

fr(fraction)
先看一个例子：

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 50px;
}

那么它的表现为1：2：1。效果如下：
在这里插入图片描述
我们也可以使用px和fr一起使用。

.container {
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
    grid-template-rows: 100px 50px;
}

它表现为第一列为200px，后面第二列与第三列为2：1的结果。效果如下：
在这里插入图片描述

间距

colum-gap:列间距
row-gap: 行间距
下面先看一个简单的例子

.container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
    column-gap: 20px;
    row-gap: 10px;
}

具体效果如下：
在这里插入图片描述
也可以简写，效果是一样的。

.container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px 20px;
}

定位和调整

要定位和调整项目的大小，我们将定位它们并使用grid-column以及grid-row属性。需注意，这是添加在子项目上的属性。

先看一个简单的例子：

.container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px 20px;
}
.item:nth-child(1) {
    background-color: red;
    grid-column-start: 1;
    grid-column-end: 4;
}

我们希望 item1 从第一条网格线开始，在第四列线结束。换句话说，它将占据整行。效果如下:
需要注意的是，我们给这个网格定义为2x3的网格，那么当它超出后，表现形式就不会受我们设置而改变。也就是说我们只设置了grid-template-rows的前两行，所以第三行的行高是它本来的行高。
在这里插入图片描述
需要特别说明得是，列线和列不一样。以下四条红色的线就是列线。

我们再看一个列子试图明白其中的奥秘，它的父元素属性设置与上例中是一样的。

.item:nth-child(1) {
    background-color: red;
    grid-column-start: 1;
    grid-column-end: 4;
} 
.item:nth-child(3) {
	background-color: yellow;
    grid-row-start: 2;
    grid-row-end: 4;
}

效果如下：
在这里插入图片描述

`auto-fit`

自适应列的数量，栅格将会根据容器的宽度调整其数量。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px 20px;
}

它会根据盒子的容器自适应显示列数。然后这种方式右侧会有比较多的留白。效果如下：
在这里插入图片描述

`minmax()`

定义的范围大于或等于 min，小于或等于 max。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
    gap: 10px 20px;
}