Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Grid: dynamically span the last column

Tags:

css

css-grid

Is it possible to automatically span the last column to occupy the remaining space in the grid? Basically I'm trying to achieve this:

enter image description here

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  background: blue;
  padding: 20px;
  border: 1px solid red;
}

.col:last-child {
  background: yellow;
  /* missing magic here */ 
}
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
</div>
like image 939
svlasov Avatar asked Aug 01 '17 10:08

svlasov


1 Answers

Unfortunately, it seems that in current version of CSS grid there is no true magic like grid-column: span auto / -1 as a universal solution. But for this particular case of 3x1 grid you can do something like the following:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  background: blue;
  padding: 20px;
  border: 1px solid red;
}

.col:last-child {
  background: yellow;
  grid-column-end: -1;
}
.col:nth-child(1):last-child {
  grid-column-start: 1;
}
.col:nth-child(2):last-child {
  grid-column-start: 2;
}
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
</div>
like image 112
Ilya Streltsyn Avatar answered Nov 19 '22 04:11

Ilya Streltsyn