CSS 网格简化！

AWS GenAI 直播！

什么是 CSS Grid？

CSS 网格布局是一种基于二维网格的布局系统，专门设计用于使布局在 CSS 上轻松工作。

以前，我们习惯使用表格、浮动、定位和内联块布局来布局网页，但这些方法都更像是 hack。Flexbox 也是一个很好的布局工具，很多人使用，但它是单向流，并且也有不同的用例。Grid 是第一个专门为解决布局问题而创建的 CSS 模块。

让我们从向布局添加网格开始，我正在制作一个简单的 HTML 容器：

<div class="container">
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
    </div>

现在让我们将网格添加到 CSS 布局中：

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-gap: 1rem;
}

.container div {
  background: #eee;
  padding: 1rem;
}
/* changed nth child color to tell the difference */
.container div:nth-child(odd) {
  background: #ddd;
}

现在，这将为我们提供 6 个 div 的输出，这些 div 分为 3fr 的列（MDN 将 fr 单位定义为表示网格容器中可用空间的一小部分的单位）。您也可以使用 px 或 rem 甚至 %，但它们是固定的。因此，使用 fr 是一种更好的做法。

网格模板列

.container {
grid-column-columns: 3fr 3fr;
}

它指定网格布局中列的数量和宽度。简单来说，您要添加的 fr 越多，添加的列就越多，而更改 fr 的值则会更改特定框的宽度；

现在，就我而言，我添加了 2fr，其值为 3。然后它将为它们提供相等的 3 个空间。

如果我要增加 fr，那么它将创建更多列。您还可以更改值以使一列比另一列更大。

网格间隙

你一定想知道我是如何获得空间之间的空间的，我使用 grid-gap 属性来表示间隙；

.container{
grid-gap: 1rem;
}

网格模板行

grid-template-rows 也和我们对列所做的一样，例如，我添加了 grid-template-rows 和 grid-template-row

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: 10fr 30fr 4fr;
  grid-gap: 1rem;
}

您还可以使用 repeat(value, fr) 来制作一致的列或行。

.container{
grid-template-columns: repeat(3, 1fr)
}

这将形成 3 列 1fr。

网格自动行

• 我们还可以使用 grid-auto-rows 来增加我们使用的框的高度。
• 例如，如果我想将高度增加 10rem，我将输入：

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: 10rem;
}

minmax()

现在，如果将它与之前的图像进行匹配，那么您将发现两个图像高度之间的差异。如果您的文本超过您给出的高度，那么您可以使用 minmax()，我们使用它来提供我们需要的最小高度，然后我们可以为元素提供最大高度，它也可以是自动的，浏览器将自行调整网格内的文本。 看看在这种情况下，文本超出了框的范围，在另一个框下面，让我们添加 mixmax() 来解决这个问题。

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: minmax(10rem, auto);
}

对齐项目、对齐项目和对齐自身、对齐自身

就像我们在 flex 中使用 justify-content 和 align-items 一样，我们在 GRID 中也有同样的东西，我们称它们为 justify-items、align-items。为了研究这一点，您只需查看 flex 属性，它们都做同样的事情。

网格列

[grid-column-start] 和 的 简写属性 [grid-column-end]。

网格列：自动自动

网格项的列起点和终点被自动设置。

网格列：1 / 3

网格项在第一列之前开始并在第三列之前结束。

网格列：跨度 3

网格项跨越 3 列。

网格列：1 / 跨度 4

网格项从第一列之前开始，跨越 4 列，并在此过程中创建一个新列。

同样的事情也发生在网格行上。

您还可以购买我在学习此主题时手写的关于 CSS Grid 的笔记，仅需 1 美元：
获取我的 CSS Grid 笔记

这些是 GRID 的一些高级主题，我将向您推荐有关 CSS Grids 的这个视频。

感谢阅读！

如果您需要有关 HTML、CSS 和 Javascript 的任何帮助，那么您可以在我的网站上找到我。

您还可以下载我的免费概念模板，这是一个强大的待办事项列表，可以提高您的工作效率。

点击这里！