Css grid: horizontal two colums, but vertical flip

Question

I use

gridTemplateColumns: `repeat(auto-fill, minmax(250px, 1fr))`,

to get two columns, if their width less than 250px, I get layout:

[1] [2]

And if the width is less than 250, I get layout:

[1]
[2]

I wonder if it is possible to have vertical layout flipped:

[2]
[1]

while keeping horizontal as described first [1] [2].

It is not the size of the screen actually, but the width of the element — WHITECOLOR, May 30 '19 at 17:48

score 3 · Accepted Answer · answered May 30 '19 at 16:31

For this particular case where there are only two grid items, you can hack it by mirroring the vertical direction in the grid container and inverting the mirror effect in the grid items - see demo below:

.wrapper {
 display: grid;
 grid-auto-rows: 100px; /* set a row height for illustration */
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 transform: scaleY(-1); /* mirror vertically */
}

.wrapper > div {
  background: aliceblue;
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scaleY(-1); /* straighten the grid item */
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>

Css grid: horizontal two colums, but vertical flip

1 Answers1