0

I have a grid layout. Now I want the .left element to span across the entire column like this:

enter image description here

But I tried to make it grid-row: auto / -1; and it does not seem to work.

I can't change the html structure nor hard code it to grid-row: auto / span xx since the number of the elements is not certain.

How do I make the first element always span the entire column?

section {
  counter-reset: spans;
  display: grid;
  grid-template-columns: 80px repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px;
}

section span {
  counter-increment: spans;
  border: solid 1px #aaa;
}

section span::before {
  content: counter(spans);
}

.left {
  grid-row: auto / -1;
}
<section>
  <span class="left"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</section>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60

1 Answers1

0

The solution is to define the columns and rows.

    section {
  counter-reset: spans;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}

section span {
  counter-increment: spans;
  border: solid 1px #aaa;
}

section span::before {
  content: counter(spans);
}

.left {
  grid-row: 1 / -1;
}

If you face any problems let me know.

Abdul Momin
  • 7
  • 2
  • But the items are not certain. There might be 100 items and only 3 items. How can I make this layout universal? – Hao Wu Jul 15 '20 at 04:30
  • You could have gone with auto-fill & and minmax to do that. But theres no way for you to span the 1st element the entire row. This is just not possible. You must have a defined rows to do that. – Abdul Momin Jul 15 '20 at 12:42