什么是 CSS Grid？
CSS Grid 是一种用于布局的 CSS 模块，它可以让我们更灵活、更方便地创建有规律或不规则的网格布局，它是专门用于布局的 CSS 属性。
CSS Grid 主要有以下几个概念：
- 网格容器（grid container）：一个 HTML 元素，它的 display 属性被设置为 grid。
- 网格线（grid line）：网格容器的行或列的分界线，划分成许多小单元格。
- 网格单元格（grid cell）：网格容器的每一个小单元格。
- 网格轨道（grid track）：网格单元格两个相邻的网格线组成的距离。
瀑布流布局
瀑布流布局是一种动态流式布局，也叫 Masonry 布局。
它是一种非常流行的网页布局方式，用于展示图片、视频等内容。瀑布流布局能够让这些元素按照一定的规则排列，让网页视觉上更加美观。
实现瀑布流布局需要用到 CSS Grid 中的 repeat() 函数和 minmax() 函数。接下来我们具体讲解一下如何实现。
实现瀑布流布局
HTML 结构
首先，我们需要定义一个网格容器，将所有瀑布流的元素都放在容器中。以下是一个简单的 HTML 结构示例：
---- ----------------------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ------
CSS 样式
接下来，我们需要设置 CSS 样式来让容器显示成瀑布流的样式。如下面的 CSS 样式示例：
--------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ----- --------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
这些 CSS 样式可以将网格容器设置为瀑布流的样式，同时也定义了网格单元格的样式。
我们需要设置网格容器的属性，包括 grid-template-columns 和 grid-auto-rows。这里我们使用 repeat() 函数和 minmax() 函数来实现。
- repeat() 函数允许我们重复某个值多次来生成一个网格模板。
- minmax() 函数用于设置网格容器的行高（或列宽），它允许我们定义一个最小值和一个最大值，浏览器会自动根据实际元素的大小决定使用哪个值。这里我们设定了每个单元格的最小宽度为 240px，最大为 1fr。
我们还设置了网格容器的 grid-gap 属性，用于设置网格单元格之间的间距。
最后，我们定义了网格单元格（或瀑布流元素）的样式，如背景色、字体等。
总结
CSS Grid 可以让我们更加灵活地创建网格布局，它是一种非常强大的布局工具。而瀑布流布局是一种非常好看的布局方式，它能够给我们带来非常好看的展示效果。
在实际开发中，我们可以用 CSS Grid 来实现类似瀑布流的布局，相信它会带给我们更棒的 UX 设计体验。
完整的示例代码如下：
---- ----------------------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- -------- ---- ----------------- -------- ---- ----------------- -------- ------ ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ----- --------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- - --------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646c1c45968c7c53b0b2a0bd