CSS Grid 是一种布局方式，可以让开发者轻松地创建复杂的网格布局。在这种布局方式中，开发者可以使用网格线来将父元素划分为网格单元格。而子项也可以被放置到这个网格中心，同时也能够自适应大小。
一、设置网格单元格
在使用 CSS Grid 布局中，首先要设置网格单元格。通过使用 grid-template-rows 和 grid-template-columns 属性来定义行和列的数量和大小，从而创建一个网格布局。
------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ---- ------ -
在这个例子中，父元素被划分为三列和三行，第一行和第三行的高度分别为 200px 和 100px，而第二行则会自适应调整大小。
二、子项自适应大小
子项的大小可以通过使用 grid-row 和 grid-column 属性来进行设置。这些属性可以决定该子项需要占用的行数和列数。
------ - --------- - - -- ------------ - - -- -
在这个例子中，子项将会占用网格布局的第一列和第一行和第二行之间的部分。这意味着子项会自适应地填充网格，同时调整其大小以适应所在的区域。
三、使用 minmax() 函数
如果你想让子项自适应其内容的大小，可以使用 minmax() 函数。该函数具有两个参数，分别为最小值和最大值。子项将会根据内容自适应调整大小，同时始终保持在这两个值之间。
------ - --------- - - -- ------------ - - -- ------ ------------- ------ -
在该例子中，子项将始终保持其宽度在 200px 和内容自身宽度之间调整大小。
四、总结
在 CSS Grid 布局中，可以使用网格线将父元素划分为网格单元格。子项可以被放置到这个网格中，使用 grid-row 和 grid-column 属性进行定位。同时，子项也能够自适应调整大小，使用 minmax() 函数可以让子项自适应其内容的大小并保持其最小和最大值之间。
了解了这些知识后，在实际开发过程中，我们能够更好地了解和使用 CSS Grid 布局，减少很多繁琐烦人的操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6521228f95b1f8cacd8993ca