How do you place an element on the bottom right corner of a CSS Grid?

Question

I have a CSS grid such as this:

.grid-wrapper
  display: grid
  margin: 0 auto
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
  grid-auto-rows: minmax(100px, auto)
  grid-gap: 10px

And I want to position a main element in the beginning:

.main-item
  grid-column-end: span 2
  grid-row-end: span 2

A series of intermediate elements following that one, and in the last possible position of the grid -not following the other elements, but literally on the right bottom corner of the grid-.

Right now I can place it on the last column with

.last item
  grid-column-end: -1

But I can't find a way of placing it on the last row -given that the number of rows is not defined-.

Any ideas?

https://codepen.io/rtyx/pen/XVQMJQ

.wrapper {
  border: 2px solid #f76707;
  background-color: #fff4e6;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  background-color: #ffd8a8;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  width: 1000px;
}

.main-item {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.last-item {
  grid-column-end: -1;
  grid-row-end: -1;
}

<div class="wrapper">
  <div class="main-item">Main item</div>
  <div class="item1">Item 2</div>
  <div class="item2">Item 3</div>
  <div class="item3">Item 4</div>
  <div class="last-item">last-item</div>
</div>

Essentially you can't. To the best of my knowledge you can't select/assign the last row unless the number of rows is determinate. — Paulie_D, Jan 23 '18 at 10:43
Related - https://stackoverflow.com/questions/48339333/css-grid-layout-with-variable-number-of-auto-rows-but-last-row-should-always?noredirect=1#comment83705768_48339333 — Paulie_D, Jan 23 '18 at 10:49

score 0 · Answer 1 · answered Jan 23 '18 at 10:28

0

Based on your codepen. In class .last-item set grid-row-end:3

answered Jan 23 '18 at 10:28

dedi wibisono

511
5
12
23

2

You have misunderstood the question. The number of rows is **not known**. Although your code "works" for the demo it will not work dynamically. – Paulie_D Jan 23 '18 at 10:54
I think he need for a static page for demo, but thanks for your explane – dedi wibisono Jan 24 '18 at 02:36
As @Paulie_D said, the number of rows is just not known. – RTYX Jan 28 '18 at 13:55

score -1 · Answer 2 · answered Jan 23 '18 at 10:44

-1

For same layout use this...

.last-item {
  grid-column-end: -1;
  grid-row-end: 4;
}

answered Jan 23 '18 at 10:44

Sarvan Kumar

926
1
11
27

That only works if I know the amount of rows and it happens to be four, I think. The moment I add enough elements in the grid so that the number of rows is higher, the "last element" remains in the middle, not at the bottom corner. – RTYX Jan 28 '18 at 13:54

How do you place an element on the bottom right corner of a CSS Grid?

2 Answers2