Stacking elements in reverse order using css grid

Question

I have the following concentric circles structure created with HTML5 + CSS3 using css-grid. I want to change the order of stacking to be reversed.

By default, each elements are stacked from left to right, right element coming above left one.

I have tried different ways to reverse the order and nothing is working.

Any suggestions?

.group {
  display: grid;
  grid-template-columns: repeat(7, 18%);
  width: 200px;
}

.circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: aqua;
  text-align: center;
}

<div class="group">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    <div class="circle">5</div>
    <div class="circle">6</div>
    <div class="circle">7</div>
</div>

I want to implement using css grid. both questions are related to css flexboxes — Sarin Vadakkey Thayyil, Apr 12 '19 at 11:57
any reason to use CSS grid? as a side note the question isn't related to flexbox, there is 3 different ways and only one use flexbox — Temani Afif, Apr 12 '19 at 12:00
@TemaniAfif I want to change order when switching between `rtl` and `ltr`. The entire page is decided to use css-grid, so I have to use the css grid. — Sarin Vadakkey Thayyil, Apr 16 '19 at 04:00

zubair1024 · Answer 1 · 2019-04-12T12:10:33.377

2

With CSS Grid:

There is a CSS property that Grid Layout adheres to called direction. direction: rtl will give you what you need with a single additional class:

.reverse-order{
  direction: rtl;
}

JSFiddle for your question: Demo

Without CSS Grid:

You can do it via adding the following CSS classes, use the appropriate class as needed:

.normal-order {
    position: absolute;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
.reverse-order > div {
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

edited Apr 12 '19 at 12:10

answered Apr 12 '19 at 12:00

zubair1024

843
8
24

Your Answer look promising. I already checked the `rtl` `ltr` values for `direction` property. The problem here is - I don't want the order of items reversed. I only want to change the stacking. When we add the direction property the item `1` moved to the end, instead of staying at front. – Sarin Vadakkey Thayyil Apr 12 '19 at 16:59

Stacking elements in reverse order using css grid

1 Answers1