Search code examples
cssresponsive-designgridtailwind-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?

How do I left-justify the content in a second Tailwind CSS grid column (green background, with rating stars), so it stays against the gap between it and 1st column (yellow background with blue text)?

I've tried 30 or 40 approaches and am stuck!

As you'll see below, the 2nd column, with green background and rating stars, hugs left and is right up against the gap between it an the 1st column.

As the screen gets wider, the 2nd column (green background) starts pulling right, leaving a bigger and bigger space (black background) between the 1st and 2nd columns (this is the problem I'm trying to solve).

This is a Vue 3 project, with Tailwind CSS 2.2.14

375px screen width: 375px screen width

475px screen width: 475px screen width

575px screen width: 575px screen width

675px screen width:

The white background is a 3rd column that only shows-up at this width and larger. I tried (unsuccessfully) to have it consume all the extra space and push column 2 left, against its gap with column 1. 675px screen width

775px screen width: 775px screen width

875px screen width: 875px screen width

975px screen width: 975px screen width

Here's my code:

        <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 -->

Thank you for any help!

Solution

  • In this instance the first column and second column have equal width. At larger screen sizes it looks like there's space between the gap and the start of the second column content. Using dev tools you can see the opposite is the case, the first column is not filling the width of it's grid cell causing blank space.

    All that needs to be added is justify-self-end on the content of the first grid column so that it hugs the right side of it's grid cell leaving only the gap between the 2 columns.