简介
随着 Web 应用程序的复杂性日益增加，前端开发人员越来越需要一种有效的方法来管理页面上的布局。CSS Grid 布局是一种面向二维布局的 CSS 布局系统，它为设计师和开发人员提供了更强大的布局能力。但是，当内容超出容器大小时，会出现内容溢出问题，这篇文章将介绍如何使用 CSS Grid 布局来解决内容溢出问题。
如何解决内容溢出问题
为了演示如何使用 CSS Grid 布局解决内容溢出问题，我们将创建一个示例布局。首先，创建一个包含两个 div 元素的 HTML 文件，如下所示：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid 布局：解决内容溢出问题</title>
<style>
.container {
margin: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel est ut justo accumsan ultrices eget ut orci. Fusce dignissim nunc sit amet magna scelerisque, eget maximus elit tincidunt. In hac habitasse platea dictumst. Donec malesuada libero eget risus dapibus, vel lacinia velit lacinia. Ut euismod efficitur libero, non fermentum nibh vestibulum vel. Ut suscipit erat magna, nec dictum risus molestie ac. Quisque congue massa vel venenatis bibendum. Pellentesque eu tempor tellus. Morbi sit amet ultrices elit. Nunc pulvinar semper elit, ac tincidunt felis viverra quis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel est ut justo accumsan ultrices eget ut orci. Fusce dignissim nunc sit amet magna scelerisque, eget maximus elit tincidunt. In hac habitasse platea dictumst. Donec malesuada libero eget risus dapibus, vel lacinia velit lacinia. Ut euismod efficitur libero, non fermentum nibh vestibulum vel. Ut suscipit erat magna, nec dictum risus molestie ac. Quisque congue massa vel venenatis bibendum. Pellentesque eu tempor tellus. Morbi sit amet ultrices elit. Nunc pulvinar semper elit, ac tincidunt felis viverra quis.</div>
</div>
</body>
</html>这个示例布局包含一个名为“container”的 div 元素，它具有 CSS Grid 布局设置，以及两个名为“item”的 div 元素，这些元素将作为内容溢出问题的示例。
在当前布局中，当一个“item”元素中的内容超出元素大小时，该元素将不会自动调整大小，而是会出现内容溢出的问题。这时可以使用 CSS Grid 布局的自动调整大小能力来解决这个问题。
为了解决溢出问题，我们需要将“item”元素的网格设置为自动调整大小，同时指定一个最小大小。
// www.javascriptcn.com code example
.container {
margin: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.item {
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
font-size: 18px;
line-height: 1.5;
/* 新增样式 */
grid-column: auto;
grid-row: auto;
overflow: auto;
max-height: 50vh;
}我们为“item”元素添加了以下 CSS 属性：
grid-column: auto：这个属性将元素放置在自动调整大小的网格位置。这意味着在页面上自动调整大小时，元素将根据所需的大小而在网格中自动调整大小。grid-row: auto：同上overflow: auto：这个属性定义了在内容超出元素大小时如何处理溢出内容。使用auto可自动添加垂直滚动条。max-height：这个属性指定元素的最大高度为 50vh。 由于“vh”是视口高度的相对单位，因此此属性确保元素始终不超过页面的可见高度。这样便保证了该属性对移动设备的适配性。
这样，当元素中的内容超出元素的大小时，它将自动调整大小并添加一个垂直滚动条。
效果示例
总结
CSS Grid 布局提供了强大的布局能力，我们可以使用它来解决内容溢出问题。通过将元素放置在自动调整大小的网格位置，并指定最小大小，我们可以实现自动调整大小并防止内容溢出。这不仅可以提高布局的可用性，还可以为用户提供更好的浏览体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a3c3c248841e989402701b