Align items neatly in grid

June 6, 2023

I have some div .test with grid-template-columns: auto auto auto; because I want the column width to be like flex effect which depends on the element width, and also justify-content: start; to align the column to the left and this is also why I use auto and not 1fr because I don’t want the columns being stretched to the longer width possible.

The problem is that I don’t know how to align the column neatly like a table does, s you can see from the example below, the p .target from the second div .test is longer than the first one, what I try to achieve is to make all other column width follow the longest one.

P.S.: I don’t want to use table. I also can use JavaScript to find the longest one and set all others’ width to this. I just want to see if there is an easy solution with CSS only.

p {
  margin: 0;
}

.test {
    column-gap: 30px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
}

p:nth-child(2) {
    position: relative;
    width: 120px;
}

.flex {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>
<div class="test">
    <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

For example, it looks like this in a table:

td:nth-child(2) {
    position: relative;
  width: 120px;
}

.flex {
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

<table>
<tbody>
  <tr>
    <td>Hello</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hellooo</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
</tbody>
</table>

Note that the all the second columns start together even the first column "hellooo" is longer from the second row.

>Solution :

Refactor your HTML so as to add all items inside a single grid and use inline-grid:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

.test {
  display: inline-grid;
}

Note that you will have to target the second element of each row with a more complex nth-child:

p:nth-child(3n + 2) {}

Try it:

.test {
  display: inline-grid;
}

p:nth-child(3n + 2) {
  position: relative;
  width: 120px;
}


/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>