使用CSS网格创建布局

> CSS网格：现代Web Design的强大布局工具

tiffany's CSS Master的摘录，第二版，提供了CSS Grid的简明介绍，CSS Grid是2017年10月引入的革命性布局系统。网格简化了以前需要广泛的DOM操作的复杂布局的创建。 虽然详细介绍了规范，但此概述涵盖了关键概念，并指出了进一步的深入学习资源。

密钥概念：

> CSS网格可以创建先前具有挑战性或无法实现的复杂布局。 它在2017年10月获得了广泛的浏览器支持。
>将
• 应用于元素建立网格格式的上下文，将元素转换为块级容器及其子女，将其转换为排列的网格项目。 display: grid>
> and
• 属性使用空间分隔grid-template-rows轨道列表grid-template-columns（例如，长度，百分比，>，，auto，min-content 🎜>）。max-content
>隐式网格自动处理超过明确定义的单元格的网格项目，根据内容默认为自动大小。
• 速记结合了行和列定义。 grid-template>函数简化了重复列或行，而repeat()>和auto-fit>动态调整列/行计数。auto-fill。

网格格式上下文：>

触发与这些效果的网格格式上下文： display: grid

该元素成为块级元素。>

儿童元素（或文本节点）变成类似块状的网格项目。
1. 在水平写作模式中，除非明确设置，否则行高度与最高的项目匹配；垂直写作模式使用最长的项目的长度。

>

的行为相似，但是容器仍然是内联级别的。>

display: inline-grid

定义网格布局：> 定义网格容器后，使用

和

指定行和列计数。 这些接受A曲目列表，一个定义每个行或列位置的网格线名称和大小的空间分隔字符串。

>

grid-template-rows显式与隐式网格：grid-template-columns>

AN显式网格定义了所有单元。 AN隐式网格扩展网格，以适应明确定义的单元格之外的其他项目。 隐式网格项目自动大小，扩展以适合内容或填充剩余空间。 隐式网格项目的grid-auto-rows和grid-auto-columns控制默认大小，但是使用minmax()>防止内容溢出。

>

>带有Flex单元（fr）的柔性网格：>

flex单位（）fr表示可用空间的分数，提供比例尺寸。 它们是比率，而不是绝对长度，并且与其他长度单位或>。 calc()

shorthand：> grid-template属性结合了

和

grid-template grid-template-rows grid-template-columns

>

重复行和列（）：repeat()>

函数简化了创建重复模式：。

>和repeat()根据可用空间动态调整重复数量。 repeat(number, track list)调整轨道尺寸； auto-fit添加匿名曲目。auto-fill auto-fitauto-fill

进一步的学习：

这是一个基本介绍；大量资源提供了更多详细的信息，包括CSS网格规范本身，Rachel Andrew's网格，例如>

，Jen Simmons的实验布局实验室和布局Land YouTube频道以及CSS-Tricks的“完整指南”。 “

结论：

> CSS网格是一个强大的工具。 此概述为进一步探索其功能提供了基础。

以上是使用CSS网格创建布局的详细内容。更多信息请关注PHP中文网其他相关文章！