如何在第二个 Tailwind CSS 网格列中左对齐内容，使其在所有屏幕尺寸下都保持与第一列之间的间隙？

Posted 2023-03-06

【中文标题】如何在第二个 Tailwind CSS 网格列中左对齐内容，使其在所有屏幕尺寸下都保持与第一列之间的间隙？

【英文标题】：How to left-justify content in a second Tailwind CSS grid column, so it stays against the gap between it and 1st column, at all screen sizes?

【发布时间】：2021-11-11 22:33:36

【问题描述】：

如何左对齐第二个 Tailwind CSS 网格列（绿色背景，带有评级星）中的内容，使其与第一列（黄色背景，蓝色文本）之间的间隙保持一致？

我尝试了 30 或 40 种方法，但都卡住了！

正如您将在下面看到的，带有绿色背景和评级星的第 2 列向左拥抱，并紧贴第 1 列之间的间隙。

随着屏幕变宽，第 2 列（绿色背景）开始向右拉，在第 1 列和第 2 列之间留下越来越大的空间（黑色背景）（这是我要解决的问题）。

这是一个 Vue 3 项目，使用 Tailwind CSS 2.2.14

375px 屏幕宽度：

475px 屏幕宽度：

575px 屏幕宽度：

675px 屏幕宽度：

白色背景是第 3 列，仅在此宽度或更大时显示。我尝试（不成功）让它消耗所有额外的空间并将第 2 列向左推，使其与第 1 列的差距。

775px 屏幕宽度：

875px 屏幕宽度：

975px 屏幕宽度：

这是我的代码：

        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-2 bg-black justify-end"> <!-- BEGIN the main div, with the black background -->

        <div class="col-span-1 place-content-end sm:px-3 max-w-max whitespace-nowrap bg-yellow-300"> <!-- BEGIN 1st column, with text + yellow background, on left -->
            <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Xxxxxxx rating:</p>
            <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Yyyyy & yyyy rating:</p>
            <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Qqqqqqqq(s) rating:</p>
            <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Wwwwwww rating:</p>      
        </div> <!-- END 1st column, with text + yellow background, on left -->
        
        <div class="col-span-1 place-content-start max-w-max whitespace-nowrap bg-green-200"> <!-- BEGIN 2nd column, with stars and green background -->
          <div class="mb-4 align-top">
            <div>         
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
              </div>  
          </div>

          <div class="mb-4 align-top">
            <div>         
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
              </div>  
          </div>

          <div class="mb-4 align-top">
            <div>         
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
              </div>  
          </div>

          <div class="mb-4 align-top">
            <div>         
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
                <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
              </div>  
          </div>
          
        </div> <!-- END 2nd column with stars and green background-->

        <div class="col-span-0 sm:col-span-1 flex-grow bg-white"> <!-- BEGIN "junk" 3rd column, with white background (unsuccessfully tried to make this take all unused space) -->
          <p></p>
        </div> <!-- END BEGIN "junk" 3rd column, with white background -->


      </div> <!-- END the main div, with the black background -->

感谢您的帮助！

【问题讨论】：

似乎第二列的 div 类中的justify-self-start 应该可以解决问题，但它没有用。链接到 TailwindCSS 文档：tailwindcss.com/docs/justify-self

嗨，您的代码示例似乎缺少调用网格和背景的第一个打开 div。

谢谢@JHeth。我刚刚添加了缺少的第一行。

所以很难说出你想要达到的目标，因为你只提供了问题的屏幕，并没有真正描述解决方案应该是什么样子。但是从绿色容器中删除max-w-max 将允许它占据分配给它的整个宽度。

我想我明白了。但不能使用默认的 Tailwind 网格实用程序。它们是为制作统一的网格而设计的。您看到此问题的原因不是因为第 2 列不是一直向左（它在它的列中），而是因为第 1 列的宽度在第 1 列的内容之后创建了黑色空间。您可以在 Chrome 中使用检查器来查看网格线。也许您正在寻找类似this 的东西，它可以使用单个内联样式来完成，或者您可以为其添加一个 Tailwind 实用程序，但如果它只使用一次，那将是矫枉过正。

【参考方案1】：

在这种情况下，第一列和第二列的宽度相等。在较大的屏幕尺寸下，间隙和第二列内容的开头之间似乎有空间。使用开发工具你可以看到相反的情况，第一列没有填充它的网格单元格的宽度导致空白。

只需在第一个网格列的内容上添加justify-self-end，使其紧贴网格单元的右侧，只留下两列之间的间隙。