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

Css – Display grid: Edge to edge grid rows (no space after last row item) How?

Please see this playground https://play.tailwindcss.com/SMkXmO9Mo8

As the text say I want the grid row items to distribute evenly and edge to edge in a container with flexible width.

justify-content: space-between; or tailwinds justify-beween has no effect on grid only flex.

enter image description here

Tags:

2

Answers


  1. 0

    Your are looking for justify-items-center. This centers all your grid items to the center of their cell. However, item 6 still won’t be at the edge of the container because item 6 doesn’t occupy all the space of it’s cell. Maybe ressort to grid cells with fit-content and use gap

    Login or Signup to reply.
  2. 0

    But basically you can’t. Each child is positioned inside it’s own grid-column which has no spatial relationship to the child’s position in the grid

    You would have to institute a column-gap based on the number of columns and the width of the children.. so something like column-gap: calc((100% - (6 * 2em)) / 5).

    .grid {
  background: lightblue;
  column-gap: calc((100% - (6 * 2em)) / 5) !important;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />

<div class="grid w-[400px] gap-0 grid-cols-6 gap-y-4 bg-slate-300">
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">1</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">2</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">3</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">4</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">5</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">6</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">7</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">8</span>
  <span class="flex h-8 w-8 items-center justify-center rounded bg-green-500">9</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search