CSS Grid 是一种强大的布局工具，它提供了网格布局来更好地控制页面元素的位置和尺寸。但是，当网格中的内容超出网格长度时，CSS Grid 会怎样处理呢？本文将探讨这个问题，并提供实际的解决方法和示例代码。
超出网格长度的内容
如果一个元素的内容宽度超出了其所在网格单元格的宽度，会发生什么呢？CSS Grid 的处理方式取决于我们指定了什么样的网格属性。下面将分别介绍挤压和溢出这两种情况的处理方法。
挤压
如果我们将网格属性设置为 grid-template-columns: 100px 100px;，两个单元格的宽度都为 100 像素，但其中一个元素的内容宽度为 120 像素，则此元素会挤压到单元格中，让单元格变得更宽，直到能够容纳住这个元素的宽度。这套处理方案有时被称为“拓展模式”，它会让我们能够自动对不同大小和内容的元素进行布局。
下面是一个简单的例子，让我们更好地理解什么是挤压模式。
<div class="grid-container"> <div class="grid-item">第一个网格</div> <div class="grid-item">第二个网格，内容超出了宽度</div> <div class="grid-item">第三个网格</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ - ---------- - ------- --- ----- ------ -------- ----- -
以上代码中，我们创建了一个 3 列的网格布局，并设置了每个单元格的宽度为 100 像素。第二个单元格中的内容宽度为 120 像素，大于单元格宽度。我们用红色着色来突显这一点，如下图所示。
此时，第二个单元格会被挤压到可以容纳其内容的宽度。我们可以通过经验方法选择网格列宽，使挤压的元素看起来整洁。
溢出
如果我们将网格属性设置为 grid-template-columns: 100px 100px;，两个单元格的宽度都为 100 像素，但其中一个元素的内容宽度为 120 像素，则此元素将不会挤压单元格。相反，它将从单元格外面溢出。这套处理方案有时被称为“收缩模式”。
下面是一个简单的例子，让我们更好地理解什么是溢出模式。
<div class="grid-container"> <div class="grid-item">第一个网格</div> <div class="grid-item">第二个网格，内容超出了宽度</div> <div class="grid-item">第三个网格</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ------ - ---------- - ------- --- ----- ------ -------- ----- --------- ------- -
以上代码中，我们创建了一个 2 列的网格布局，并设置了每个单元格的宽度为 100 像素。我们添加了一个 overflow: hidden 属性，这样可以让挤出的内容被隐藏，以确保它不会影响布局。现在，无论第二个单元格的内容宽度如何，它都将溢出。
控制网格中的元素
虽然 CSS Grid 有自己的布局模式，但我们也可以通过 CSS 属性，如 width 和 height 来控制网格中的元素。
<div class="grid-container"> <div class="grid-item" style="width: 200px;">第一个网格</div> <div class="grid-item">第二个网格，内容超出了宽度</div> <div class="grid-item" style="height: 50px;">第三个网格</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ - ---------- - ------- --- ----- ------ -------- ----- -
在以上代码中，我们用 style 属性来添加了一些 CSS 样式，控制了每个单元格的宽度和高度。如果我们在 grid-template-rows 和 grid-template-columns 属性中定义了网格的列和行，则其他单元格的宽度和高度会根据这些值进行自适应。
通过这种方式，我们可以更好地控制网格布局和它们中的元素。
结论
CSS Grid 可以自动处理网格中元素的大小和位置，甚至在超出网格长度时也能做到。我们可以通过 overflow、width 和 height 属性来控制网格中的元素，并通过经验方法来选择网格列宽。CSS Grid 是一个非常强大的布局工具，有了它，我们可以更好地控制元素位置和尺寸。
希望本文能够帮助你更好地理解 CSS Grid 在处理超出网格长度的内容时是如何表现的，并提供了实用的方法和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b0ffeddd3a70eb6d18475