Make a Grid Item Span to the Last Row/Column in 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>

Is it possible to explicitly make a grid item appear always on the last row or last column?

Following my comment; from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#Counting_backwards

We can also count backwards from the block and inline end of the grid, for English that would be the right hand column line and final row line. These lines can be addressed as -1, and you can count back from there – so the penultimate line is -2.

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>

Make a Grid Item Span to the Last Row/Column in Implicit Grid

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

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

Is it possible to explicitly make a grid item appear always on the last row or last column?

How to change grid columns size on implicit row?

Related Topics

Leave a reply