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

Question

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

我已经尝试了 30 或 40 种方法，但还是卡住了！

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

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

这是一个 Vue 3 项目，带有 Tailwind CSS 2.2.14

375px 屏幕宽度：

475px 屏幕宽度：

575px 屏幕宽度：

675px 屏幕宽度：

白色背景是第 3 列，仅在此宽度和更大宽度处显示。我尝试（未成功）让它消耗所有额外的 space 并将第 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 -->

感谢您的帮助！

Answer 1

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

所有需要添加的是 justify-self-end 第一个网格列的内容，以便它紧靠其网格单元格的右侧，只留下两列之间的间隙。

如何在第二个 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?

css

grid

responsive-design

tailwind-css