3 分钟上手 CSS Grid 布局

╰半夏微凉° 2023-02-15 05:02 13阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]  
`CSS Grid` 布局是 `CSS` 中最强大的布局系统。与 `flexbox` 的一维布局系统不同，`CSS Grid` 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 `Grid Container` 网格容器)和其 子元素（成为 `Grid Items` 网格项），你就可以轻松使用 Grid (网格) 布局。

## 基础知识 ##

截至2017年3月，许多浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和 Opera 。 另一方面，Internet Explorer 10和11支持它，但是是一个过时的语法实现。 现在是时候使用 Grid 布局网页了！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 1]  
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。

CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。

在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础的知识。

## 您的第一个 Grid 布局 ##

--------------------

CSS Grid 布局由两个核心组成部分是 `wrapper`（父元素）和 `items`（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

下面是一个 wrapper 元素，内部包含6个 items ：

HTML 代码:

要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 `display` 属性设置为 `grid` 即可：

CSS 代码:

.wrapper {
        
        display: grid;
    }

但是，这还没有做任何事情，因为我们没有定义我们希望的 grid(网格) 是怎样的。它会简单地将6个 div 堆叠在一起。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 2]  
我已经添加了一些样式，但是这与 CSS Grid 没有任何关系。

## Columns(列) 和 rows(行) ##

--------------------

为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用`grid-template-row`和`grid-template-column`属性。

CSS 代码:

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

正如你所看到的，我们为 `grid-template-columns` 写入了 `3` 个值，这样我们就会得到`3`列。 我们想要得到 `2` 行，因此我们为 `grid-template-rows` 指定了`2`个值。

这些值决定了我们希望我们的列有多**宽**（ `100px` ），以及我们希望行数是多**高**（ `50px` ）。 结果如下：

![在这里插入图片描述][20200604153142756.png]  
为了确保你能正确理解这些值与网格外观之间的关系，请看一下这个例子。

CSS 代码:

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

请尝试理解上面的代码，思考一下以上代码会产生怎样的布局。

这是上面代码的布局的结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 3]

非常好理解，使用起来也非常简单是不是？下面我们来加大一点难度。

## 放置 items(子元素) ##

--------------------

接下来你需要学习的是如何在 `grid`(网格) 上放置 `items`(子元素) 。特别注意，这里才是体现 Grid 布局超能力的地方，因为它使得创建布局变得非常简单。

我们使用与之前相同的 HTML 标记，为了帮助我们更好的理解，我们在每个 `items`(子元素) 加上了单独的 `class` ：

现在，我们来创建一个`3×3` 的 grid(网格)：

CSS 代码:

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

将得到以下布局：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 4]  
不知道你发现没有，我们只在页面上看到 `3×2`的 grid(网格)，而我们定义的是 `3×3` 的 grid(网格)。这是因为我们只有`6`个 items(子元素) 来填满这个网格。如果我们再加`3`个 items(子元素)，那么最后一行也会被填满。

要定位和调整 `items`(子元素) 大小，我们将使用 `grid-column` 和 `grid-row` 属性来设置：

CSS 代码:

.item1 {
        
        grid-column-start: 1;
        grid-column-end: 4;
    }

我们在这里要做的是，我们希望 `item1` 占据从**第一条网格线开始，到第四条网格线结束**。换句话说，它将独立占据整行。 以下是在屏幕上显示的内容：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 5]  
如果你不明白我们设置的只有 `3` 列，为什么有`4`条网格线呢？看看下面这个图像，我画了黑色的列网格线：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 6]

请注意，我们现在正在使用网格中的所有行。当我们把第一个 `items`(子元素) 占据整个第一行时，它把剩下的`items`(子元素) 都推到了下一行。

最后，给你一个更简单的缩写方法来编写上面的语法：

CSS 代码:

.item1 {
        
        grid-column: 1 / 4;
    }

为了确保你已经正确理解了这个概念，我们重新排列其他的 `items` (子元素) 。

CSS 代码:

.item1 {
        
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .item3 {
        
        grid-row-start: 2;
        grid-row-end: 4;
    }
    .item4 {
        
        grid-column-start: 2;
        grid-column-end: 4;
    }

你可以尝试在你的脑子里过一边上面代码的布局效果，应该不会很难。

以下是页面上的布局效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 7]  
Grid 布局就是这么简单，当然这里展示的是最简单的 Grid 布局概念，但是 Grid 布局系统中还有更多强大灵活的特性。

这里给大家分享一个小福利，在线自动生成`CSS Grid Source Code` 的在线生成器 ： [CSS Grid Geneartor ][CSS Grid Geneartor]

参考资料：

*  https://www.html.cn/archives/8506
 *  https://www.html.cn/archives/8512
 *  https://www.html.cn/archives/8510

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604154750510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604152746210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200604152929841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[20200604153142756.png]: https://img-blog.csdnimg.cn/20200604153142756.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200604153325504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020060415350076.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200604153721890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200604153759950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200604154028734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dVNTIyOTQ4NQ==,size_16,color_FFFFFF,t_70
[CSS Grid Geneartor]: https://cssgrid-generator.netlify.app/