CSS Grid 是一种用于创建网格布局的强大工具，它可以帮助我们轻松地实现弹性布局和固定布局。在本文中，我们将详细介绍如何使用 CSS Grid 实现这两种布局，并提供示例代码和指导意义。
弹性布局
弹性布局是一种响应式设计的方法，可以根据不同的屏幕尺寸和设备类型自动调整布局。CSS Grid 提供了一些强大的功能，可以帮助我们实现弹性布局。
定义网格
首先，我们需要定义一个网格。可以使用 grid-template-rows 和 grid-template-columns 属性来定义行和列的数量和大小。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}上面的代码定义了一个包含 3 行和 3 列的网格，每一行和每一列的大小都是相等的。
自适应网格
接下来，我们需要让网格自适应不同的屏幕尺寸和设备类型。可以使用 grid-template-rows 和 grid-template-columns 属性中的 minmax() 函数来定义行和列的最小和最大大小。
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
grid-template-columns: repeat(3, minmax(100px, 1fr));
}上面的代码定义了一个包含 3 行和 3 列的网格，每一行和每一列的大小都是最少 100 像素，最多占据可用空间的 1/3。
自动布局
在定义了网格之后，我们可以使用 grid-auto-flow 属性来定义网格中项目的自动布局方式。默认情况下，项目会按照文档流的顺序排列。但是，我们也可以使用 grid-auto-flow 属性来定义自动布局的方式。
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-auto-flow: dense;
}上面的代码定义了一个包含 3 行和 3 列的网格，每一行和每一列的大小都是最少 100 像素，最多占据可用空间的 1/3。grid-auto-flow 属性的值为 dense，表示项目会尽可能地填满空白区域。
固定布局
固定布局是一种不会随着屏幕尺寸和设备类型变化而改变的布局。CSS Grid 也可以帮助我们实现固定布局。
定义网格
首先，我们需要定义一个网格。可以使用 grid-template-rows 和 grid-template-columns 属性来定义行和列的数量和大小。
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;
}上面的代码定义了一个包含 2 行和 2 列的网格，第一行和第二行的高度都是 100 像素，第一列和第二列的宽度都是 200 像素。
固定位置
在定义了网格之后，我们可以使用 grid-row 和 grid-column 属性来定义项目的位置。这些属性接受一个数字或一个范围，表示项目应该占据哪些行或列。
-- -------------------- ---- ------- ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- -
上面的代码定义了三个项目，分别占据了不同的行和列。item1 占据了第一行和第一列，item2 占据了第一行和第二列，item3 占据了第二行和第一列和第二列。
总结
CSS Grid 是一种强大的工具，可以帮助我们实现弹性布局和固定布局。在本文中，我们介绍了如何使用 CSS Grid 实现这两种布局，并提供了示例代码和指导意义。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6618d537d10417a222939153