CSS Grid 是一种强大的布局工具，它可以使网站的布局更加灵活和自由。但是，在使用 CSS Grid 时，可能会遇到一个问题：如何将网格列固定在一侧？在本文中，我们将介绍如何使用 CSS Grid 实现这一目标。
什么是 CSS Grid？
CSS Grid 是一种用于创建网格布局的 CSS 模块。它使用行和列来定义网格，可以轻松地创建复杂的布局。CSS Grid 具有以下优点：
- 可以创建任意数量的行和列。
- 可以轻松地定义网格中的间距和间隔。
- 可以轻松地对网格中的单元格进行对齐和排序。
- 可以轻松地更改网格的大小和形状。
如何将网格列固定在一侧？
在 CSS Grid 中，可以使用 grid-template-columns 属性来定义网格的列。通常，我们会使用像这样的代码来定义网格的列：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}这将创建一个具有三列的网格，每列的宽度都为 1fr。但是，在某些情况下，我们可能希望将网格的一列固定在一侧，例如，将边栏固定在左侧或右侧。在这种情况下，我们可以使用 grid-template-columns 属性的 repeat() 函数和 minmax() 函数来实现。
使用 repeat() 函数
repeat() 函数可以重复一个值或一组值，从而创建具有相同属性的多个网格列。例如，我们可以使用以下代码来创建一个具有四列的网格，其中第一列宽度为 200px，其余三列宽度为 1fr：
.grid {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
}这将创建一个具有四列的网格，其中第一列宽度为 200px，其余三列宽度为相等的 1fr。
使用 minmax() 函数
minmax() 函数可以定义一个列的最小和最大宽度。例如，我们可以使用以下代码来创建一个具有三列的网格，其中第一列宽度为 200px，其余两列宽度为最小值为 200px，最大值为 1fr：
.grid {
display: grid;
grid-template-columns: 200px minmax(200px, 1fr) minmax(200px, 1fr);
}这将创建一个具有三列的网格，其中第一列宽度为 200px，其余两列宽度为最小值为 200px，最大值为 1fr。
示例代码
下面是一个完整的示例代码，演示如何将网格列固定在一侧：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
}
.grid2 {
display: grid;
grid-template-columns: 200px minmax(200px, 1fr) minmax(200px, 1fr);
}
.item {
border: 1px solid #ccc;
padding: 10px;
}
.item1 {
grid-column: 1 / 2;
}
</style>
</head>
<body>
<h1>使用 CSS Grid 将网格列固定在一侧</h1>
<h2>使用 repeat() 函数</h2>
<div class="grid">
<div class="item item1">固定列</div>
<div class="item">自动列1</div>
<div class="item">自动列2</div>
<div class="item">自动列3</div>
</div>
<h2>使用 minmax() 函数</h2>
<div class="grid2">
<div class="item item1">固定列</div>
<div class="item">自动列1</div>
<div class="item">自动列2</div>
</div>
</body>
</html>在这个例子中，我们创建了两个网格，分别使用 repeat() 函数和 minmax() 函数将网格列固定在一侧。其中，.item1 类指定了固定列的样式，.grid 和 .grid2 类分别指定了两个网格的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2355fa941bf7134432f05