css - CSS Grid Layout 与其他布局系统有什么区别?

标签 css twitter-bootstrap layout flexbox css-grid

CSS Grid Layout 之间有什么区别?和现有的布局框架,如 Bootstrap或其他布局,如 CSS FlexboxCSS Tables (不是 HTML 表格,我知道它们应该只用于表格内容)?

它的概念是什么?它涵盖了哪些用例?

最佳答案

CSS 网格布局并不是试图取代 Twitter Bootstrap 中的 HTML 表格、 flexbox 和网格。 CSS 网格是一种创建标记的新方法。

创建网格布局的目的是仅在 CSS 中声明您的布局。如果您的容器带有简单的子列表,您只能通过 CSS 添加 2D 布局。不需要将元素包装在 row 容器中等等。但这不是网格的好处,有时您需要将单元格包裹在 HTML 中的行中。

Twitter bootstrap 和表具有相同的概念:您有一些行及其子级在 HTML 中声明。这不是缺点,而是它的工作原理。在 flexbox 出现之前,由于缺乏其他方法,我们比应有的更频繁地使用这些方法。

很久很久以前(在 CSS 出现之前)我们只在前端使用表格。这并不意味着 table 不好。这是唯一的办法。但是当你真的需要一张 table 时,这些 table 很好。您只是不应该将它们用于所有事情。

Flexbox 是关于元素的一维排列。当然在某些情况下它看起来像 2D。在某些情况下,您将不得不使用一些技巧,因为您确实需要一个网格!但这是由于浏览器的网格相对较低,而不是由于 flexbox 的正确应用。它非常适合某些布局,但对于其他真正需要 2D 的布局(您最好使用表格或网格),它可能有点笨拙。

因此,只需使用网格布局,您的布局就可以用网格术语优雅地表达出来。在其他情况下,它不会是可维护和优雅的方式。

关于css - CSS Grid Layout 与其他布局系统有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44881871/

相关文章:

html - 所有浏览器和设备的图标/开始屏幕

css - "Stick"调整大小时元素顶部的 svg

javascript - 如何将 JSON 数据与 Bootstrap 树一起使用?

html - 未知的元素样式

android - 如何在 android studio 中将 2 列中的 6 个图像按钮与 3 行对齐?

javascript - 增量 CSS3 淡入

html - 使用 CSS 动画更改背景图像

html - 基于 Bootstrap 的导航以及下拉支持,以使用全宽显示均匀间隔的导航

html - 使用 CSS 在 Accordion 结构中排列 div

algorithm - 如何移动线段以消除最小移动的交叉点?