CODEWITHSUNDEEP
htmlcss
RoyBarOn
RoyBarOn

Reputation: 987

How to set grid alignment to right?

I'm using grid-template-columns to spread 2 items in each row. What i need is that if the items number is not even - the next item will float to the right of the container (like in the picture) - and not left - like it's by default...

enter image description here

.cont {
  width:500px;
      display: grid;
    grid-template-columns: repeat(2, 1fr);
     justify-content: stretch;
}

.box {
  width: 100px;
  height:100px;
  background-color:red;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px;
}
<div class="cont">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
I need to be under 6
</div>

</div>

Upvotes: 0

Views: 115

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17556

A pragmatic, simple and quick solution would be to work with the pseudo element :last-child (https://developer.mozilla.org/de/docs/Web/CSS/:last-child). Then you can move the last box with margin-left, for example.

.cont {
  width:500px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: stretch;
}

.box {
  width: 100px;
  height:100px;
  background-color:red;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px;
}

.box:last-child {
  background: green;
  margin-left: 105%;
}
<div class="cont">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
I need to be under 6
</div>

</div>

Upvotes: 1

Related Questions