顺风柱系统

Question

我做了这个有12列的网格系统，细节是我想以一种我不知道是否可能的方式修改它。修改包括再添加两列，一列在开头，一列在末尾，这两列将为 1fr。我做了那部分，但我想做的是，第 1 列 (1fr) 和第 2 列 (84px) 之间没有间隙，第 13 列 (84px) 和第 14 列 (1fr) 之间的情况相同。我附上迄今为止的代码。

我尝试了上面的代码。

Answer 1

在 CSS 网格中，您不能有选择地在网格列轨道之间设置间隙。它们之间要么有差距，要么没有。

作为解决方法，您可以考虑使用可以充当间隙的中间网格列轨道：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<style type="text/tailwindcss">
.desktop-grid {
  @apply lg:grid
    lg:grid-cols-[1fr_repeat(11,84px_theme(gap.6))_84px_1fr]
    lg:mx-auto;
}
</style>

<div class="desktop-grid">
  <div class="col-span-2 h-10 bg-red-200"></div>
  <div class="col-start-2 col-[span_23/span_23] h-10 bg-blue-200"></div>
</div>