CSS Grid - 使用 grid-column-start 和 grid-column-end 时无法对齐列

Question

我对 CSS Grid 和 Flexbox 还很陌生，所以我希望您能就从 12 网格布局设计开始的最佳方式提出意见，这些设计看起来像我发现的这些示例：

1. 当使用 CSS Grid 并尝试绘制结构时，在使用 grid-column-start 和 grid-column-end 使列跨度更宽（底部容器）时对齐多个网格容器的列时遇到问题：

   CodePen using tailwindcss

2. 我在做一些根本错误的事情吗？ flexbox 更适合这个吗？

tailwindcss 解决方案是首选，但基本 CSS 没问题。

Answer 1

您必须将<div class="bg-black col-start-1 col-end-4"></div> 替换为：<div class="bg-black col-start-1 col-end-2"></div>

Answer 2

您的问题源于使用grid-flow-col。您正在更改网格的填充方式。您已经设置了 12 列，但是通过使用网格自动流列，它会根据需要继续添加更多。

这在您的第二个网格上成为一个问题，因为虽然您有 12 个已定义的列和 12 个元素，但第一个元素被设置为占据 3 个列。

删除“.grid-flow-col”。

另外，请记住：“col-start-1 col-end-4”可以简化为“col-span-3”。

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

浏览器有一些很棒的内置开发工具来处理 CSS 网格。您可以切换一个网格叠加层，它会准确地向您显示事情是如何出错的。

Answer 3

您可以将两个网格组合成一个父容器 <div>，而不是拥有两个父级 <div>。

不是让两个单独的 <div> 容器对每列进行分组，而是使用一个 <div> 父容器将两个网格组合在一起。然后你需要做的是向单个父网格添加额外的行：

<div class="container border-8 border-red-400 gap-4 grid mx-auto grid-cols-12 grid-rows-2 text-orange h-80 my-5">
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  
  <div class="bg-black col-start-1 col-end-4 row-start-2"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
  <div class="bg-black"></div>
  <div class="bg-red-700"></div>
</div>

请注意，添加了一些额外的顺风类：grid-rows-2 并且还删除了 grid-flow-col 类（我还添加了一个红色边框以使视觉宽度比较更容易）。

这将给出以下结果：