How to Span to the Last Column in an Implicit Grid

How to span to the last column in an implicit grid?

Why shouldn't it work on implicit grids?

Because we can easily run on undefined cases¹ or a cyclic dependency. If it was the implicit grid, it means that we need to first place all the others element to identify the implicit grid then we place our element BUT if we place our element we will obtain another implicit grid so technically you cannot know the implicit grid without placing the element.

The idea behind the implicit grid is to place the element that doesn't have anything defined for their placement automatically after placing the ones with known places.

---

You can overcome this by using some hacks either for row or column:

Stretch an element to the end of the automatically calculated grid, not just the explicit grid

Forcing a column to be empty in a responsive grid layout

---

¹ A basic example:

.grid {  display: grid;  grid-template-columns: 50px;  grid-gap: 5px;  grid-auto-flow: column;  grid-auto-columns:50px;}
.grid>span {  height: 50px;  background: red;}
.grid>span.place {  grid-column: 1 / -1;  background: blue;}

<div class="grid">  <span></span>  <span class="place"></span></div>

Make a grid item span to the last row / column in implicit grid

You can add grid-row-start to that boxes css, and set it to span an absurdly high number.

.container {  display: grid;  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;   grid-template-rows: auto [last-line];}
.box {  background-color: blue;  padding: 20px;  border: 1px solid red;}
.box:nth-child(3) {  background-color: yellow;  grid-column: last-col / span 1;  grid-row: 1 / last-line;  grid-row-start: span 9000;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box">3</div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

Implicit grid-area doesn't work as expected

This isn't a completely different approach, but you could use grid-column and not use grid-template-areas entirely. This solution also uses grid-template-columns.

.parent { 
  display: grid;
  grid-gap: 3px;
  /* Defines two columns */
  grid-template-columns: 1fr 1fr;
}

.parent > div {
  /* Visibility and styling */
  background-color: black;
  color: white;
  padding: 1rem;
  text-align: center;
  font-family: sans-serif;
}

.third, .fourth {
  /* Sets the column that the item should span */
  grid-column: 1 / -1;
}

<div class="parent">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
  <div class="fourth">4</div>
</div>

How to make a child span the grid from the first to the last gap?

make the element to span from the second column to before the last column then use negative margin:

.grid {
  border: 1px solid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.grid div {
  height: 100px;
  background: red;
  grid-column: 2 / -2;
  margin: 0 -24px;
}

<div class="grid">
  <div></div>
</div>

How to change grid columns size on implicit row?

Essentially, once a row/column size has been set it cannot be changed.

What you can do is define the grid in such a way that items can span multiple columns.

So instead of a 5fr wide container, define one that is 10 columns of 1fr each and then specify how may columns an individual child will span.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1em;
  margin: 1em;
}

p {
  border: 1px solid grey;
}

p {
  grid-column: span 4
}

p:nth-child(2) {
  grid-column: span 6;
}

p:nth-child(3) {
  grid-column: span 6;
}

<div class='container'>
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
</div>

---

Related Topics