Filling a CSS Grid from bottom up instead of top down

Question

I need a way for the elements in my CSS Grid to stack upwards instead of top down.

Here's what I have so far:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 306px;
  border: 1px solid black;
}

.gridItem {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}

user_8620333 · Answer

Use flexbox:

.grid {
  display: flex;
  flex-flow: wrap-reverse; /* this will do the magic */
  width: 300px;
  border: 1px solid black;
  box-sizing:border-box;
}

.gridItem {
  width:calc(100%/3);
  height: 100px;
  box-sizing:border-box;
  border: 1px solid orange;
}

user_11989189 · Answer

If you know exact number of divs you can try with grid areas:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 306px;
  border: 1px solid black;
}

.gridItem {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.div1 { grid-area: 3 / 1 / 4 / 2; }
.div2 { grid-area: 3 / 2 / 4 / 3; }
.div3 { grid-area: 3 / 3 / 4 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 1 / 1 / 2 / 2; }

Filling a CSS Grid from bottom up instead of top down

2 Answers