如何在 CSS Grid 中设置复杂的单元格大小？
CSS Grid 是一种用于创建网格布局的强大工具，但是在设置单元格大小时，可能会出现复杂的情况，需要一些技巧和技巧。在本文中，我们将深入研究如何在 CSS Grid 中设置复杂的单元格大小。
1. 使用网格线名称
使用网格线名称是一种简单有效的方法，可以在 CSS Grid 中定义复杂的单元格大小。可以通过使用 grid-template-rows 和 grid-template-columns 属性来设置单元格大小，而不需要指定任何具体的像素或百分比值。
下面是一个简单的示例，使用网格线名称设置单元格大小：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- ------------ ----- --------- ----------- ----- ----------- ---------------------- ------------ ----- --------- ----------- ----- ----------- - ------- - --------- ---------- - --------- ------------ ---------- - --------- - ------- - --------- ---------- - --------- ------------ ---------- - --------- - ------- - --------- ---------- - --------- ------------ ---------- - --------- -
在该示例中，我们使用了网格线名称定义三个单元格。然后通过将类指定为所需的单元格，可以指定网格行和列的起始和结束点。
2. 使用 fr 单位
使用 fr 单位是设置复杂单元格大小的另一个有用技巧。fr 单位表示可用空间的一部分。可以将其视为基于网格容器大小的分数。
可以通过将 fr 单位应用于 grid-template-columns 或 grid-template-rows 属性来设置单元格的大小。
下面是一个示例，使用 fr 单位设置单元格大小：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --- --- ---- ---------------------- --- --- ---- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- -
在该示例中，我们使用了 fr 单位将网格容器划分为三行三列。然后，我们分别分配了单元格间的 fr 单位，以实现所需的尺寸。
3. 使用 minmax() 函数
minmax() 函数又是一种有用的方法，可以在 CSS Grid 中设置复杂的单元格大小。该函数接受两个参数：最小值和最大值，表示元素可以在这些值之间取任何尺寸。
可以通过将 minmax() 函数应用于 grid-template-columns 或 grid-template-rows 属性来设置单元格的大小。
下面是一个示例，使用 minmax() 函数设置单元格大小：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ------------- ------ ------------------- ------------- ------ --- ------------- ------- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- -
在该示例中，我们使用了 minmax() 函数将网格容器划分为三行三列。然后，我们使用 repeat() 函数将单元格的大小设置为最小值为 100px，最大值为 1fr，以实现所需的大小。
总结：
在 CSS Grid 中设置复杂单元格大小的方法有很多，以上方法只是其中的一部分。无论选择哪种方法，都应该根据布局的要求选择最佳适用方法。
希望本文能够帮助你更好地理解和使用 CSS Grid 中的单元格大小，提高前端技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d2660968c7c53b0faa3ae