CSS Grid 中如何实现子项自适应大小？

CSS Grid 是一种布局方式，可以让开发者轻松地创建复杂的网格布局。在这种布局方式中，开发者可以使用网格线来将父元素划分为网格单元格。而子项也可以被放置到这个网格中心，同时也能够自适应大小。

一、设置网格单元格

在使用 CSS Grid 布局中，首先要设置网格单元格。通过使用 grid-template-rows 和 grid-template-columns 属性来定义行和列的数量和大小，从而创建一个网格布局。

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px auto 100px;
}

在这个例子中，父元素被划分为三列和三行，第一行和第三行的高度分别为 200px 和 100px，而第二行则会自适应调整大小。

二、子项自适应大小

子项的大小可以通过使用 grid-row 和 grid-column 属性来进行设置。这些属性可以决定该子项需要占用的行数和列数。

.child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

在这个例子中，子项将会占用网格布局的第一列和第一行和第二行之间的部分。这意味着子项会自适应地填充网格，同时调整其大小以适应所在的区域。

三、使用 minmax() 函数

如果你想让子项自适应其内容的大小，可以使用 minmax() 函数。该函数具有两个参数，分别为最小值和最大值。子项将会根据内容自适应调整大小，同时始终保持在这两个值之间。

.child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  width: minmax(200px, auto);
}

在该例子中，子项将始终保持其宽度在 200px 和内容自身宽度之间调整大小。

四、总结

在 CSS Grid 布局中，可以使用网格线将父元素划分为网格单元格。子项可以被放置到这个网格中，使用 grid-row 和 grid-column 属性进行定位。同时，子项也能够自适应调整大小，使用 minmax() 函数可以让子项自适应其内容的大小并保持其最小和最大值之间。

了解了这些知识后，在实际开发过程中，我们能够更好地了解和使用 CSS Grid 布局，减少很多繁琐烦人的操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521228f95b1f8cacd8993ca