Html Question posted in
Some basic documentation can be found here.

Html – How to reduce the gap in TailwindCSS grid

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

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You completely misuse the grid system. In fact, you should not even sue 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 ever 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search