CSS Aligning item to the right

Question

How to position the elements which are even to the right? I've tried nth-child(even); and float: right; but it's not working.

#container {
  grid-template-columns: repeat(1,minmax(0px,1fr));
  grid-column-gap: 60px;
  grid-row-gap: 20px;
  text-align: left;
  display: grid;
  width: 100vw;
}

.items {
  width: 80%;
  height: 90px;
  background-color: blue;
}

.items:nth-child(even) {
  float: right;
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

you can also use margin-left:auto – Temani Afif Jul 16 '21 at 08:28 — Temani Afif, Jul 16 '21 at 08:28

score 1 · Answer 1 · answered Jul 16 '21 at 06:48

Just change float:right to justify-self: end;

#container {
  grid-template-columns: repeat(1,minmax(0px,1fr));
  grid-column-gap: 60px;
  grid-row-gap: 20px;
  text-align: left;
  display: grid;
  width: 100vw;
}

.items {
  width: 80%;
  height: 90px;
  background-color: blue;
}

.items:nth-child(even) {
  justify-self: end;
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

score 0 · Answer 2 · answered Jul 16 '21 at 06:56

#container {
  grid-template-columns: repeat(1,minmax(0px,1fr));
  grid-column-gap: 60px;
  grid-row-gap: 20px;
  text-align: left;
  width: 100vw;
  overflow: hidden;
}

.items {
  margin-bottom: 10px;
  width: 80%;
  height: 90px;
  background-color: blue;
  overflow: hidden;
}

.items:nth-child(even) {
  float: right;
}

score -1 · Accepted Answer · answered Jul 16 '21 at 06:49

use justify-self: end; on .items:nth-child(even).

#container {
  grid-template-columns: repeat(1,minmax(0px,1fr));
  grid-column-gap: 60px;
  grid-row-gap: 20px;
  text-align: left;
  display: grid;
  width: 100vw;
}

.items {
  width: 80%;
  height: 90px;
  background-color: blue;
}

.items:nth-child(even) {
  justify-self: end;
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

CSS Aligning item to the right

3 Answers3