CSS Grid - enforcing common column size across list items

Question

I have a <ul>-list, where each list item contains multiple sections of text.

I want want each section of text to be as narrow as possible, but I still want all of them to be aligned vertically across the items. E.g.

<ul>
  <li> A. Name     | Some complex address        | 555-1234 </li>
  <li> Longer Name | Short Addr.                 | 555-1234 </li>
  <li> P. Diddy    | No home                     | 555-1234 </li>
</ul>

I hoped css grid would solve this issue for me, but I can't figure it out...

ul {
  list-style: none;
  display: grid;
  justify-content: stretch; 
}

li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

p:nth-child(1) {
  background: #EEEEEE;
  border-right: 1px solid;
}

p:nth-child(2) {
   background: #CECECE;
   border-right: 1px solid;
}


p:nth-child(3) {
    background: #EEEEEE;
}

<ul>
  <li>
    <p>A. Name</p>
    <p>Some complex address</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>Longer Name</p>
    <p>Short Addr.</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>P. Diddy</p>
    <p>No home</p>
    <p>555-1234</p>
  </li>
</ul>

Is css grid the wrong tool for the job, or am I missing something here?

I know I'll get downvotes for this, but can fulfill your requirements. — ecg8, Apr 04 '18 at 22:18
You either need to flatten the HTML, so that all content items become siblings in the same container and can recognize the grid container lines (note that this practice is bad for HTML semantics)... — Michael Benjamin, Apr 04 '18 at 22:59
... or you can wait for browsers to implement Grid's [**subgrid feature**](https://stackoverflow.com/q/47929369/3597276), which allows descendants of a grid container, beyond the children, to recognize the top-level container lines. — Michael Benjamin, Apr 04 '18 at 23:02
I tried subgrid multiple times before I spotted the 'this is not implemented'-note... :-( — Vegar, Apr 05 '18 at 06:51
@Michael_B or wait for display: content, that probably will come before subgrid .... https://css-tricks.com/get-ready-for-display-contents/ — vals, Apr 05 '18 at 08:01

Temani Afif · Accepted Answer · 2018-04-04T22:30:44.657

3

They need to belong to the same grid to have this result, so you may try something like this:

^{Yes there is no more list}

.list {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

p:nth-child(3n + 1) {
  background: #EEEEEE;
  border-right: 1px solid;
}

p:nth-child(3n +2) {
  background: #CECECE;
  border-right: 1px solid;
}

p:nth-child(3n+3) {
  background: #EEEEEE;
}

<div class="list">
  <p>A. Name</p>
  <p>Some complex address</p>
  <p>555-1234</p>

  <p>Longer Name</p>
  <p>Short Addr.</p>
  <p>555-1234</p>

  <p>P. Diddy</p>
  <p>No home</p>
  <p>555-1234</p>
</div>

Or consider display:table and you can keep your list structure:

.list {
  display: table;
  margin:0;
  padding:0;
  border-spacing: 10px;
}
.list li {
  display:table-row;
}
p {
 display:table-cell;
}
p:nth-child(1) {
  background: #EEEEEE;
  border-right: 1px solid;
  white-space:nowrap;
}

p:nth-child(2) {
  background: #CECECE;
  border-right: 1px solid;
  width:100%;
}

p:nth-child(3) {
  background: #EEEEEE;
  white-space:nowrap;
}

<ul class="list">
<li>
  <p>A. Name</p>
  <p>Some complex address</p>
  <p>555-1234</p>
</li>
<li>
  <p>Longer Name</p>
  <p>Short Addr.</p>
  <p>555-1234</p>
</li>
<li>
  <p>P. Diddy</p>
  <p>No home</p>
  <p>555-1234</p>
</li>
</ul>

edited Apr 04 '18 at 22:30

answered Apr 04 '18 at 22:14

Temani Afif

245,468
26
309
415

maybe `display: table` is the right way. I want to keep the hierarchical structure. Typically, each list item would be a react component, and even though it's possible to have the component render as a set of top level `
`-s instead of a `
` containing childs, I'm not sure I want to go there...

Vegar

Apr 04 '18 at 22:33

@Vegar yes but not yet supported https://stackoverflow.com/questions/48613691/equal-height-children-of-grid-items/48613967#48613967 – Temani Afif Apr 04 '18 at 22:54

I agree absolutely on "it should be a table". Or at least, use display:table. (your second snippet). This should be the accepted answer. – vals Apr 06 '18 at 09:42

I agree that this is the best answer. I'm still a little worried of the limitations there, though. Things that requires 'hacks' where one item spans multiple table rows to get data spread vertically in normal tables will need the same 'hack' here, I would guess. My solution will be to use a grid on item level, and align items by having fixed size columns instead. That will work ok for my current case at least. – Vegar Apr 09 '18 at 10:08

vals · Answer 2 · 2018-04-05T10:16:58.503

3

A new way to solve this problem would be to use display: content.

It will flatten your HTML keeping it semantic.

Support is still low, but probably it will come sooner than subgrid.

You can find this article in CSS Tricks interesting

ul {
  list-style: none;
  justify-content: stretch; 
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

li {
  display: contents; /* make it disapear */
}

li:nth-child(odd) {
  background-color: red;
  color: blue;
  font-weight: bold;
}

p:nth-child(1) {
  border-right: 1px solid;
  background-color: inherit;
}

p:nth-child(2) {
   background: #CECECE;
   border-right: 1px solid;
}


p:nth-child(3) {
    background: #EEEEEE;
}

<ul>
  <li>
    <p>A. Name</p>
    <p>Some complex address</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>Longer Name</p>
    <p>Short Addr.</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>P. Diddy</p>
    <p>No home</p>
    <p>555-1234</p>
  </li>
</ul>

edited Apr 05 '18 at 10:16

answered Apr 05 '18 at 09:38

vals

61,425
11
89
138

What will happen with ‘stuff’ added to the li element? Eg selection state/styles? – Vegar Apr 05 '18 at 09:59
The article linked to in a comment on the question gives the answer: `makes that the div doesn’t generate any box, so its background, border and padding are not rendered. ` – Vegar Apr 05 '18 at 10:15
1

The li color for instance is not renered, but the p element inherits it. For the background-color, it wont't be used because it is overwritten – vals Apr 05 '18 at 10:26
i like this `display:contents`, am already thinking about a lot of trick to do with it :p – Temani Afif Apr 06 '18 at 09:48

CSS Grid - enforcing common column size across list items

2 Answers2