Specify the columns to start from the right with CSS Grid

Question

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:

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>

Answer 1

Placing one item into the last column is easy using negative column values, but unfortunately CSS grids don't support flowing the next one automatically to its left. Items are placed into grid cells by the auto-placement algorithm (controlled using the grid-auto-flow property), which is a grid container level setting - meaning your content will get placed either horizontally or vertically. Changing the axis or direction per element is not allowed.

What you could do is create a wrapper element for the floated columns, extend it to the last column using grid-column-end: -1; and place the floated columns using flexbox. You'll need to alter your markup for that though, so you might want to reconsider using CSS grid as your grid system's layout engine. It makes a lot of previously near-impossible layouts easy, but this is one case which it does the opposite.