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/
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
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! :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.