如何避免 CSS Grid 元素溢出及居中布局-JavaScript中文网-JavaScript教程资源分享门户

前言

CSS Grid 是一种强大的布局方式，它能够让我们轻松地创建复杂的网格布局。然而，有时候我们不小心会遇到 CSS Grid 元素溢出的问题，又或者想要实现居中布局，但又不知道该如何下手。那么本篇文章就会详细地讲解如何避免 CSS Grid 元素溢出，并实现居中布局。

避免 CSS Grid 元素溢出

问题描述

当使用 CSS Grid 进行布局时，有时候可能会遇到元素溢出的问题。如下图所示，元素超出了网格容器的范围。

解决方案

1. 使用 auto-fit 和 auto-fill

auto-fit 和 auto-fill 是 CSS Grid 中很有用的属性，它们可以控制自动布局的行或列的数量。在使用时，我们只需将它们与 minmax() 函数一起使用，如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这个例子将会创建一个网格布局，自动填充容器的空白区域，并确保每个栅格的最小尺寸为 200px，最大尺寸为 1fr。这样一来，就能顺利避免元素溢出的问题。

2. 使用 grid-template-rows 和 grid-template-columns

这个解决方案的思路是通过在 grid-template-rows 和 grid-template-columns 中的 repeat() 函数中指定相应的尺寸，避免元素溢出的问题。如下所示：

.grid {
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(2, 150px);
}

这个例子将创建一个网格布局，共有 2 行和 2 列，每行每列的尺寸均为 150px。这样，即使我们的元素内容比较多，也不会出现溢出的情况。

3. 使用 overflow: auto

如果我们的栅格布局必须要一个固定的宽度和高度，而且里面的内容很多的话，我们可以使用 overflow: auto 实现滚动条。如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  overflow: auto;
}

这个例子将会创建一个水平栅格布局，含有四个栅格，每个栅格等宽。当内容超出栅格的边界时，浏览器将会显示滚动条来浏览内容。

实现居中布局

问题描述

在 CSS Grid 中，有时候我们需要实现居中布局，这时我们就需要考虑如何处理对象的对齐问题。

解决方案

1. 使用 grid-template-areas

grid-template-areas 可以让我们在栅格布局中精确地控制元素的位置。我们只需将需要居中布局的元素包在 div 中，并定义一个新的类居中，如下所示：

<div class="grid">
  <div class="center">这个 div 会居中</div>
  <div>这个 div 不会居中</div>
  <div>这个 div 不会居中</div>
  <div>这个 div 不会居中</div>
</div>

// javascriptcn.com 代码示例
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    ". . . ."
    ". center center ."
    ". center center ."
    ". . . .";
}

.center {
  grid-area: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

这个例子将会创建一个栅格布局，由 4 行和 4 列组成。我们将中央的那个 div 取名为 center，然后使用 grid-template-areas 来定义它的位置。最后，我们给这个 div 加上了一个 CSS 类，以实现居中布局。

2. 使用 justify-content 和 align-items

我们可以在网格布局中使用 justify-content 和 align-items 属性来实现水平和垂直居中。经过如下设置：

.grid {
  display: grid;
  justify-content: center;
  align-items: center;
}

这个例子将会创建一个栅格布局，其中的内容会在水平和垂直方向上都居中。我们只需通过添加样式类，将要居中的元素添加到栅格布局中即可。

总结

本篇文章介绍了如何避免 CSS Grid 的元素溢出问题，并实现了居中布局。尤其是对于 CSS Grid 的自适应布局，在实战中的应用是非常广泛的。希望读者们通过本篇文章的学习，能够更加深入地理解和应用 CSS Grid。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65348e6b7d4982a6eb94cdfb