Specify the columns to start from the right with CSS Grid

user_5203951 0
Viewed 12854

I'm trying to change my Flexbox layout to the new display: grid, and I have three columns.

<div class="grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
    <div class="two   wide column"></div>
</div>

It looks like this:

enter image description here

Is it possible to specify some of the columns to start from the right instead of the left like the following picture?

(And without specifing the grid-column-start and the grid-column-end, this can be done with the margin-left: auto with the Flexbox)

<div class="grid">
    <div class="three wide column"></div>
    <div class="right floated two wide column"></div>
    <div class="right floated two wide column"></div>
</div>

enter image description here

grid-layout css-grid css
3 Answers

Actually, you can make a normal grid layout and set the columns as if you were to start from left to right (with the spacing you want). Then just put an Html attr of "dir: rtl"

(run the snippet)

ul {
  border: 1px solid black;
  width: 80%;
  height: 300px;
  display: grid;
  grid-auto-flow: column;
  list-style: none;
}

li {
  width: 20px;
  height: 100%;
  border: 1px solid green;
}

.colored {
  background: green;
}
<ul dir="rtl">
  <li class="colored"></li>
  <li class="colored"></li>
  <li></li>
  <li></li>
  <li class="colored"></li>
</ul>

user_118972020
Related