0

I'm playing with "grid layout" and I have a "section" with 100% width. This is display: grid.

Inside it there are 4 other divs that I would like to appear on the right side instead of the left side.

Here is my code:

.fullWidth {
  display: grid;
  grid-template: "it01 it02 it03 it04 it05";
  grid-template-rows: 40px;
  grid-template-columns: 40px 40px 40px 200px 40px;
  background: orange;
}

.item01 {
  grid-area: it01;
  background: lime;
}

.item02 {
  grid-area: it02;
  background: blue;
}

.item03 {
  grid-area: it03;
  background: red;
}

.item04 {
  grid-area: it04;
  background: yellow;
}

.item05 {
  grid-area: it05;
  background: tomato;
}
<section class="fullWidth">
  <div class="item01"> </div>
  <div class="item02"> </div>
  <div class="item03"> </div>
  <div class="item04"> </div>
  <div class="item05"> </div>
</section>

Here's the fiddle: https://jsfiddle.net/2mpsuc7c/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Russel Riehle
  • 267
  • 1
  • 11
  • You could always flip your monitor 180 degrees. If that doesn't have the desired result add: `align-items: end;` to `.fullwidth` – Xorifelse Nov 16 '17 at 02:56
  • I tried to set align-items: end; in the fiddle example.. The content disapeared! – Russel Riehle Nov 16 '17 at 02:59
  • Then what about `justify-items: end;` It aligns the content to the right side of the box in order. – Xorifelse Nov 16 '17 at 03:12
  • Unfortunatelly they also disappear! – Russel Riehle Nov 16 '17 at 03:13
  • Works for [me](https://imgur.com/a/vEosW) but then again grid is still not supported on [every browser](https://caniuse.com/#feat=css-grid). This includes safari that does not support `grid-template-rows` – Xorifelse Nov 16 '17 at 03:15
  • [Browser support for CSS Grid](https://stackoverflow.com/a/46060829/3597276) – Michael Benjamin Nov 16 '17 at 03:37
  • @Michael_B Look at the known issues, there is one that specifically targets Safari. The fact that it disappears on his screen and not on the screenshot I showed should say enough. – Xorifelse Nov 16 '17 at 03:47

2 Answers2

2

Just add:

.fullWidth {
    justify-content: end;
}

Updated snippet:

.fullWidth {
  display: grid;
  grid-template: "it01 it02 it03 it04 it05";
  grid-template-rows: 40px;
  grid-template-columns: 40px 40px 40px 200px 40px;
  background: orange;
  justify-content: end;
}

.item01 {
  grid-area: it01;
  background: lime;
}

.item02 {
  grid-area: it02;
  background: blue;
}

.item03 {
  grid-area: it03;
  background: red;
}

.item04 {
  grid-area: it04;
  background: yellow;
}

.item05 {
  grid-area: it05;
  background: tomato;
}
<section class="fullWidth">
  <div class="item01"> </div>
  <div class="item02"> </div>
  <div class="item03"> </div>
  <div class="item04"> </div>
  <div class="item05"> </div>
</section>

Updated Fiddle

ceferrari
  • 1,597
  • 1
  • 20
  • 25
0

You can make use of the direction property with direction: rtl:

.fullWidth {
  display: grid;
  grid-template: "it01 it02 it03 it04 it05";
  grid-template-rows: 40px;
  grid-template-columns: 40px 40px 40px 200px 40px;
  background: orange;
  direction: rtl;
}

.item01 {
  grid-area: it01;
  background: lime;
}

.item02 {
  grid-area: it02;
  background: blue;
}

.item03 {
  grid-area: it03;
  background: red;
}

.item04 {
  grid-area: it04;
  background: yellow;
}

.item05 {
  grid-area: it05;
  background: tomato;
}
<section class="fullWidth">
  <div class="item01"></div>
  <div class="item02"></div>
  <div class="item03"></div>
  <div class="item04"></div>
  <div class="item05"></div>
</section>

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71