CSS Grid 中的列和行是什么以及有什么区别？

Question

CSS Grid中的行和列有什么区别？

当我查看网格模型时，列从左到右穿过页面，行从上到下穿过页面是有意义的。

甚至行数和列数也匹配，并且不会与标准定义完全不同。

Answer 1

对 CSS Flexbox 术语的观察是一个常见的混淆来源，它来自于我们传统上考虑行和列的方式，尤其是在列垂直运行、行水平运行的表格和网格的上下文中。在 Flexbox 中，术语更多的是关于主轴的方向，而不是传统的网格布局视角。

背后的逻辑： 原因是Flexbox关注的是内容流的方向而不是物理布局结构。

主轴：弹性项目的布局方向（水平成行或垂直成列）。 横轴：垂直于主轴的方向。如果您的主轴是行（水平），那么您的横轴是列（垂直），反之亦然。

如果这很难概念化，只需在你的脑海中翻转术语，你应该会很好。