GRID项目右对齐

Question

我正在玩“网格布局”，我有一个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>

这是小提琴： https://jsfiddle.net/2mpsuc7c/

Answer 1

只需添加：

.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

Answer 2

您可以将{strong> direction 属性与direction: rtl一起使用：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<section class="fullWidth">
  <div class="item01"></div>
  <div class="item02"></div>
  <div class="item03"></div>
  <div class="item04"></div>
  <div class="item05"></div>
</section>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）