grid right-aligned property

Question

enter image description here I want a layout like this. ⬆️

enter image description here But it's only like this layout...⬆️

The code I worked on is this

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  grid-gap: 16px;
}

.grid-item {
  width: 100%;
  height: 30px;
  border: 1px solid black;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Are there any more properties I need to add to the .grid-container class?

I don't think there is a way to do this with CSS. You can use filler elements (created with JS) as suggested in [this answer](https://stackoverflow.com/a/31478004/8068625), but it's going to get tricky if you want the site to be responsive. — Henry Woody, Oct 19 '22 at 02:26

score 0 · Answer 1 · answered Oct 19 '22 at 02:13

What you might be looking for is the grid-column property. There are many uses for this property, but the below example should be applied to the 7th div in question.

grid-column: 2;

This is a very basic answer, and will help if you're not planning to dynamically change the number of divs, or add more in the future. If this is not what you're looking for exactly, give me more information on what the grid is going to be used for, or what you're trying to achieve with it, so I can assist further :)

Thanks for your kind reply! But it's a UI where the number of items is constantly changing Can you help me a little more ? — Holideez, Oct 19 '22 at 02:19

score 0 · Accepted Answer · answered Oct 19 '22 at 03:05

0

please use "direction: rtl".

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  grid-gap: 16px;
  direction: rtl;
}

.grid-item {
  width: 100%;
  height: 30px;
  border: 1px solid black;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

answered Oct 19 '22 at 03:05

Full Stack Developer

54
1

The problem has been completely resolved, but unfortunately, it seems that this property is only supported by the latest browsers.. https://caniuse.com/?search=direction%3A%20rtl thanks for the good info though! – Holideez Oct 19 '22 at 03:20
Oh! I misunderstood. Compatibility is perfect..! thank you very much for the reply – Holideez Oct 19 '22 at 03:24
yes, I tested before post, – Full Stack Developer Oct 19 '22 at 11:09

score 0 · Answer 3 · answered Oct 19 '22 at 08:35

You can solve this using nth-child:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  border: 1px solid red;
  margin: 10px;
}

.grid-item {
  height: 30px;
  border: 1px solid black;
}

.grid-item:last-child {
  grid-column-end: -1;
}
.grid-item:nth-last-child(2):nth-child(even) {
  grid-column-end: -2;
}

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

grid right-aligned property

3 Answers3