1

I am using the TailwindCSS grid function to show the stats and their value.

I want to know how to decrease the distance/gap between the state and its value so that I can bring them closer to each other.

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


<div class="card-content">
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-gray-700 font-semibold">Total:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-green-500 font-semibold">Easy:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-yellow-400 font-semibold">Medium:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-red-500 font-semibold">Hard:</p>
        <p class="text-black">20</p>
    </div>
</div>

Improve this question

3 Answers 3

Reset to default
0

you can sets a maximum width of 150px for the .card-content container using max-w-[150px]. This width limits the space available for the columns, which naturally reduces the distance between the stat label (e.g., "Total:", "Easy:") and its corresponding value (e.g., 20).

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


<div class="card-content max-w-[150px]">
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-gray-700 font-semibold">Total:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-green-500 font-semibold">Easy:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-yellow-400 font-semibold">Medium:</p>
        <p class="text-black">20</p>
    </div>
    <div class="stat grid grid-cols-2 mb-4">
        <p class="text-red-500 font-semibold">Hard:</p>
        <p class="text-black">20</p>
    </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You completely misused the grid system. In fact, you should not even use a grid here as it is tabular data, and as such a table would be appropriate.
However, if you want to use a grid, then you have to add the grid to the container containing all data, and not only to every row.

You can define the rules for the column width with block brackets and space the element apart with the gap class. In your case you want the first column to have the width of the longest label for which you could use grid-template-columns: auto 1fr;. This equals in Tailwind class: grid-cols-[auto_1fr].

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


<div class="card-content grid grid-cols-[auto_1fr] gap-y-4 gap-x-2">
  <label for="total" class="text-gray-700 font-semibold">Total:</label>
  <output id="total" class="text-black">20</output>

  <label for="easy" class="text-green-500 font-semibold">Easy:</label>
  <output id="easy" class="text-black">20</output>

  <label for="medium" class="text-yellow-400 font-semibold">Medium:</label>
  <output id="medium" class="text-black">20</output>

  <label for="hard" class="text-red-500 font-semibold">Hard:</label>
  <output id="hard" class="text-black">20</output>
</div>

<p> stands for paragraph which is a container for flow text. It is not a container for a single word or value. In your case, you should use label and output and connect those for screen-readers.

Improve this answer

Comments

-1

To decrease the gap between the stat label and its corresponding value in your Tailwind CSS grid, you can adjust the gap property on the grid container. By default, Tailwind CSS applies a certain gap between grid items, but you can customize it.

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

<div class="card-content">
  <div class="stat grid grid-cols-2 gap-1 mb-4">
    <!-- Adjusted gap here -->
    <p class="text-gray-700 font-semibold">Total:</p>
    <p class="text-black">20</p>
  </div>
  <div class="stat grid grid-cols-2 gap-1 mb-4">
    <!-- Adjusted gap here -->
    <p class="text-green-500 font-semibold">Easy:</p>
    <p class="text-black">20</p>
  </div>
  <div class="stat grid grid-cols-2 gap-1 mb-4">
    <!-- Adjusted gap here -->
    <p class="text-yellow-400 font-semibold">Medium:</p>
    <p class="text-black">20</p>
  </div>
  <div class="stat grid grid-cols-2 gap-1 mb-4">
    <!-- Adjusted gap here -->
    <p class="text-red-500 font-semibold">Hard:</p>
    <p class="text-black">20</p>
  </div>
</div>

Key Changes: gap-1: This class sets a smaller gap between the columns of the grid. You can adjust this value as needed: gap-0 (no gap) gap-0.5 (1/8 rem) gap-1 (1/4 rem) gap-2 (1/2 rem) and so on, up to larger values like gap-12.

Improve this answer

1 Comment

Have you tested your code? The gap by default is 0. adding gap-1 actually spaces the elements more apart!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.