CSS Grid 布局是一种灵活且强大的布局方式，它为我们提供了许多不同的布局方式，可以在 Web 设计中发挥重要作用。本篇文章将讨论在 CSS Grid 中实现自适应和固定宽度的按钮布局的技巧。
自适应宽度的按钮布局
在实现自适应宽度的按钮布局之前，我们需要先了解 CSS Grid 中的几个基本概念。
网格容器
网格容器是指我们通过 display: grid 或 display: inline-grid 定义的 HTML 元素。它们成为网格布局的父元素。
网格线
网格线是网格容器中的水平和垂直线条。网格线可以被命名和设置位置，以定义网格单元格的大小和位置。
网格单元格
网格单元格是由网格线围成的矩形区域。它们是网格容器中的最小单元格。
网格轨道
网格轨道是指一条网格线与另一条网格线之间的空间。网格轨道可以是行轨道或列轨道。
网格区域
网格区域是由四条网格线围成的一个矩形。它们可以合并成更大的单元格，或作为一个单元格的一部分。
有了这些基本概念之后，我们就可以开始实现自适应宽度的按钮布局了。我们可以使用网格容器和网格轨道来控制按钮的宽度和位置。下面是一个示例代码：
<div class="button-container"> <button class="button">Button 1</button> <button class="button">Button 2</button> <button class="button">Button 3</button> <button class="button">Button 4</button> </div>
-- -------------------- ---- ------- ----------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ------- - -------- ----- ----------------- -------- ------ ----- ------- ----- -
在上面的代码中，我们使用了 grid-template-columns 属性来定义网格单元格的大小和数量。repeat(auto-fit, minmax(100px, 1fr)) 表示让浏览器自动适应容器宽度，每个单元格的最小宽度为 100 像素，最大宽度为 1 充满容器。grid-gap 属性定义了单元格之间的间距。
通过上述代码，我们实现了一个自适应宽度的按钮布局。这个布局会自动调整按钮的宽度，并允许添加或删除按钮数量的时候保持适当的间距。
固定宽度的按钮布局
对于固定宽度的按钮布局，我们可以使用网格容器和网格模板区域。我们在 HTML 中创建一个包含所有按钮的网格区域，然后在 CSS 中定义它的大小和位置。下面是一个示例代码：
<div class="button-container"> <button class="button">Button 1</button> <button class="button">Button 2</button> <button class="button">Button 3</button> <button class="button">Button 4</button> </div>
-- -------------------- ---- ------- ----------------- - -------- ----- -------------------- -------- ------- ------- --------- - ------- - -------- ----- ----------------- -------- ------ ----- ------- ----- - -------------------- - ---------- -------- - -------------------- - ---------- -------- - -------------------- - ---------- -------- - -------------------- - ---------- -------- -
在上面的代码中，我们使用了 grid-template-areas 属性来定义网格区域。每个按钮都使用 grid-area 属性定义在网格中的位置。我们使用 nth-child 选择器来定义按钮的位置。
通过上述代码，我们实现了一个固定宽度的按钮布局。这个布局允许我们将按钮安排在任何位置，并且每个按钮都具有相同的宽度。当我们添加或删除一个按钮时，相邻按钮的位置不会发生变化。
结论
在 CSS Grid 中实现自适应和固定宽度的按钮布局非常容易。我们只需要了解网格容器和网格单元格的基本概念，并使用网格模板和网格轨道来控制按钮的大小和位置。这些技巧可以在许多不同的 Web 设计中使用，并且具有非常高的可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee9c346fbf960197259612