CODEWITHSUNDEEP
csscss-grid
MeltingDog
MeltingDog

Reputation: 15468

How do you (dynamically) justify cells to the right with CSS Grid?

I have a 2 col 2 row grid with 3 of the items/cells occupied.

I would like it to appear like:

A B
C

I know I can use grid-column: 2; on the 3rd item but that doesn't really help me if I have a dynamic number of rows and items.

I'm also aware of direction: rtl; on the wrapping element, but this obviously reverses the order which is not idea, eg:

B A
C

I've tried justify-content: right/end/flex-end but no luck there either.

I am aware I can achieve the above with flex-box but was just curious if there was a way with CSS grid?

Upvotes: 0

Views: 48

Answers (1)

Temani Afif
Temani Afif

Reputation: 273649

Since you only have two columns you can write a specific selector and target the last item

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border: 1px solid;
  margin: 10px;
}

.box div {
  height: 50px;
  background: red;
}

/* place the last item at last column  */
.box div:last-child {
  grid-column-end: -1;
}
<div class="box">
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 2

Related Questions