CSS Grid 是前端界中比较新且强大的布局方式之一。它允许开发者在网页中创建复杂的网格布局，从而使网页更加灵活和易于管理。在 CSS Grid 中，我们可以通过多种方式控制网格项目的大小和位置。本文将介绍在 CSS Grid 中实现项目固定大小的方法，并提供了一些示例代码帮助读者更好地理解这个概念。
为什么要固定网格项目的大小？
在 CSS Grid 中，网格项目的大小是自动计算的，并由其内容和父元素的大小决定。但在某些情况下，我们可能需要强制指定一个网格项目的大小。例如，在设计一个网页布局时，我们需要让所有网格项目都具有相同的宽度，以达到一致的样式。或者，我们希望网格项目具有固定的高度，以确保它们在不同屏幕尺寸下的显示效果一致。因此，固定网格项目的大小是一个很有用的技巧，能够帮助我们更好地控制网页布局。
固定网格项目的宽度
要固定网格项目的宽度，我们可以使用以下方法：
1. 使用 grid-template-columns 属性
grid-template-columns 属性用于定义网格布局的列，通过为每一列指定固定的宽度，我们可以实现固定网格项目的宽度。例如，下面的代码将网格布局分为三列，每一列的宽度为 100px。
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}2. 使用 grid-auto-columns 属性
grid-auto-columns 属性用于定义未在 grid-template-columns 中指定宽度的网格项目的宽度，默认情况下其值为 auto，即自动计算。如果我们希望对所有网格项目统一指定一个宽度，可以将 grid-auto-columns 设置为相应的长度值。例如，下面的代码将所有网格项目的宽度设置为 200px。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3列*/
grid-auto-columns: 200px;
}固定网格项目的高度
要固定网格项目的高度，我们可以使用以下方法：
1. 使用 grid-template-rows 属性
grid-template-rows 属性用于定义网格布局的行，通过为每一行指定固定的高度，我们可以实现固定网格项目的高度。例如，下面的代码将网格布局分为两行，每一行的高度为 50px。
.grid-container {
display: grid;
grid-template-rows: 50px 50px;
}2. 使用 grid-auto-rows 属性
grid-auto-rows 属性用于定义未在 grid-template-rows 中指定高度的网格项目的高度，默认情况下其值为 auto，即自动计算。如果我们希望对所有网格项目统一指定一个高度，可以将 grid-auto-rows 设置为相应的长度值。例如，下面的代码将所有网格项目的高度设置为 100px。
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr; /* 2行*/
grid-auto-rows: 100px;
}示例代码
以下是一个简单的网格布局的示例代码，通过设置 grid-template-columns 和 grid-template-rows 属性，我们可以自定义网格的列数和行数以及每一行或列的宽度或高度。通过设置 grid-auto-rows 或 grid-auto-columns 属性，我们可以指定未在 grid-template-columns 或 grid-template-rows 中指定宽度或高度的网格项目的宽度或高度。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ -- -- -- ------------------- ---- ----- -- -- -- --------- ----- -- ---- -- --------------- ------ -- -- ------------------ ------------- -- - ---------- - ----------------- ----- ----------- ------- ---------- ----- -------- ----- -
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div>
在上面的代码中，我们设置了 grid-template-columns: 100px 100px 100px 和 grid-template-rows: 50px 50px，定义了网格布局的列和行，并通过 grid-auto-rows: 100px 指定了未指定高度的网格项目的高度。我们还为网格项目设置了背景色和其他一些样式。
结论
在 CSS Grid 中，固定网格项目的大小是一种非常实用的技巧，可以帮助我们更好地控制网页布局。通过使用 grid-template-columns 和 grid-template-rows 属性以及 grid-auto-columns 和 grid-auto-rows 属性，我们可以轻松地实现这一目标。本文提供了一些示例代码，希望能帮助读者更好地理解这个概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a6a5da1ce0063548c7039