cssgrid布局（cssgrid布局换行）



Bootstrap的默认网格系统代表了十多年来CSS布局技术的顶峰，数百万人对此进行了尝试和测试。但是，它的创建也没有我们在浏览器中看到的许多现代CSS特性和技术，比如新的Gird布局。

译者注：Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但它们也存在重大区别。
Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大，我们团队为此整理了一个扩展文档：CSS Grid 网格布局完整教程

在Bootstrap5中，我们添加了一个选项来启用一个独立的网格系统，该系统构建在CSS网格上，但有一个Bootstrap扭曲。你仍然可以随心所欲地应用这些类来构建响应性的布局，但在幕后采用了不同的方法。

• CSS网格是可选的。 . 通过设置禁用默认网格系统，并通过设置启用CSS网格。然后，重新编译你的Sass。
• 将的实例替换为。类设置并创建一个，您可以在该模板上使用HTML进行构建。
• 将类替换为类。这是因为我们的CSS网格列使用属性而不是。
• 列和边沟大小通过CSS变量设置。在父上设置这些参数，并使用和以您想要的方式进行自定义，无论是内联的还是在样式表中。

在未来，Bootstrap可能会转向混合解决方案，因为属性已经实现了对弹性盒几乎完全的浏览器支持。

与默认网格系统相比：

• Flex实用程序不会以相同的方式影响CSS网格列。
• 缝隙代替了间沟。属性替换默认网格系统中的水平，其功能更像。
• 因此，与不同，没有负边距，边距实用程序不能用于更改网格左侧列。有关详细信息，请参阅自定义部分。
• 内联样式和自定义样式被视为修改器类的替代品（例如，vs）。
• 嵌套的工作原理类似，但可能需要在嵌套的的每个实例上重置列计数，相关详细信息请参阅嵌套部分。

可以使用类创建跨越所有视口和设备的三个等宽列。添加响应类以按视口大小更改布局。

使用响应类跨视口调整布局。在这里，我们从最窄的视口上的两列开始，然后在中等及以上视口上增加到三列。

在所有视口中将其与此两列布局进行比较。

当水平方向上没有空间时，栅格项目会自动换行到下一行。请注意，适用于栅格项目之间的水平间隙和垂直间隙。

Start类旨在替换默认网格的偏移量类，但它们并不完全相同。开始类从开始，因为是这些属性的无效值。

当网格项（的直接子项）上没有类时，每个网格项的大小将自动调整为一列。

此行为可以与轴网柱类混合使用。

与默认网格系统类似，CSS网格允许轻松嵌套。考虑下面的例子：

• 我们使用一个本地CSS变量覆盖默认的列数。
• 在第一个“自动”列中，将继承列计数，并且每列为可用宽度的三分之一。
• 在第二个auto列中，我们将嵌套的上的列数重置为12（默认值）。
• 第三个自动列没有嵌套内容。

实际上，与默认网格系统相比，这允许更复杂和自定义的布局。

使用本地CSS变量自定义列数、行数和间隙宽度。

这些CSS变量没有默认值；相反，它们应用在提供本地实例之前使用的回退值。一旦设置该值，实例将使用该值，而不是回退值。

的直接子元素是网格项，因此它们的大小将在不显式添加类的情况下确定。

调整列数和间距。

添加更多行并更改列的位置：

仅通过修改来更改垂直间隙。请注意，我们在上使用，但可以根据需要修改和。

因此，您可以有不同的垂直和水平，可以采用单个值（所有边）或一对值（垂直和水平）。这可以使用的内联样式，也可以使用我们的CSS变量。

CSS网格的一个限制是，我们的默认类仍然由两个Sass变量生成，和。这里有两个选项：

• 修改这些默认Sass变量并重新编译CSS。
• 使用内联样式或自定义样式来扩充提供的类。

例如，您可以增加列数并更改间距大小，然后混合使用内联样式和预定义的CSS网格列类（例如，）调整“列”的大小。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/36203.html