GRID 项目右对齐
GRID items right aligned
我正在玩 "grid layout",我有一个 "section",宽度为 100%。这是显示:grid.
其中还有 4 个我希望显示在右侧而不是左侧的 div。
这是我的代码:
.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>
这是 fiddle:
https://jsfiddle.net/2mpsuc7c/
您可以使用 direction
属性 和 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>
希望对您有所帮助! :)
只需添加:
.fullWidth {
justify-content: end;
}
更新的代码段:
.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>
已更新Fiddle
我正在玩 "grid layout",我有一个 "section",宽度为 100%。这是显示:grid.
其中还有 4 个我希望显示在右侧而不是左侧的 div。
这是我的代码:
.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>
这是 fiddle: https://jsfiddle.net/2mpsuc7c/
您可以使用 direction
属性 和 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>
希望对您有所帮助! :)
只需添加:
.fullWidth {
justify-content: end;
}
更新的代码段:
.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>
已更新Fiddle