DEV Community
·
网格基础：轨道大小
内容提要
网格布局通过display: grid将容器分为行和列，可以设置列和行的大小，使用fr单位和minmax()限制大小，内容大小影响min-content和max-content。repeat()函数可重复设置相同大小，auto-fill和auto-fit可自动调整列数以避免溢出。
关键要点
-
网格布局通过display: grid将容器分为行和列。
-
可以设置列和行的大小，使用fr单位和minmax()限制大小。
-
内容大小影响min-content和max-content。
-
repeat()函数可重复设置相同大小。
-
auto-fill和auto-fit可自动调整列数以避免溢出。
-
fr单位根据容器的可用空间确定最终宽度。
-
minmax(min, max)语句可限制列或行的宽度。
-
min-content、max-content和auto值基于子元素的内容大小。
-
fit-content(argument)类似于minmax(auto, min(argument, max-content))。
-
使用repeat()函数可以轻松设置多个列或行的相同大小。
-
auto-fill会创建尽可能多的列，即使它们是空的。
-
auto-fit只会创建所需的列。
延伸解读
网格布局的灵活性
网格布局通过使用fr单位和minmax()函数，提供了极大的灵活性。fr单位根据容器的可用空间动态调整列宽，而minmax()则允许开发者设定列的最小和最大宽度。这种灵活性使得在响应式设计中，能够更好地适应不同屏幕尺寸，提升用户体验。
内容大小的影响
在网格布局中，min-content和max-content的值直接受子元素内容大小的影响。理解这些概念对于设计布局至关重要，因为它们决定了列和行的实际显示效果。开发者应注意，若内容变化，可能需要重新调整布局以保持美观和功能性。
自动填充与适应
使用auto-fill和auto-fit功能可以有效避免布局溢出。auto-fill会创建尽可能多的列，即使这些列为空，而auto-fit则只创建所需的列。这两者的选择取决于设计需求，开发者应根据具体情况选择合适的方式，以优化布局效果。
延伸问答
网格布局如何定义行和列的大小？
网格布局通过使用display: grid来定义行和列的大小，可以使用fr单位和minmax()函数限制大小。
fr单位在网格布局中有什么作用？
fr单位根据容器的可用空间来确定最终的宽度，允许灵活分配空间。
minmax()函数在网格布局中如何使用？
minmax()函数用于限制列或行的宽度，接受最小值和最大值作为参数。
如何使用repeat()函数设置相同大小的列或行？
可以使用repeat()函数来轻松设置多个列或行的相同大小，例如grid-template-columns: repeat(2, 100px)。
auto-fill和auto-fit有什么区别？
auto-fill会创建尽可能多的列，即使它们是空的，而auto-fit只会创建所需的列。
内容大小如何影响网格布局的设置？
内容大小影响min-content和max-content的值，这些值基于子元素的内容大小。
