How to use justify-content: end in conjunction with 1fr in CSS grids?

Question

I understand that fr is calculated based on available space in the grid container. I have a situation where I have a grid container that I want to split into 5 columns. The children however, are dynamically generated and depending on the situation, it could be 3 children or 4 or 5. I still want to keep the 5-column grid intact with the specified grid-column-gap, but I want the grid to start populating the elements from the right. Please see my code below: https://codepen.io/skepticacid/pen/dyGxaJb

<html>
  <body>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
      <div class = "grid-child">5</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
      <div class = "grid-child">4</div>
    </div>
    <div class = "grid-container">
      <div class = "grid-child">1</div>
      <div class = "grid-child">2</div>
      <div class = "grid-child">3</div>
    </div>
  </body>
</html>

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1rem;
  justify-content: end;
  align-items: center;
  padding: 1rem;
  margin-bottom: 2rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

5 elements is the happy path. However, when it comes down to 4 or 3 elements, I want them to be aligned similar to a justify-content: end or flex-end (so in the 4-column example, I want div number 4 to align with div number 5 above). Also, I also want to retain the width of the column to match the ones in the 5-column width.

Is this possible through CSS grid? Apologies, if I'm missing something glaringly obvious.

score 3 · Accepted Answer · answered Aug 02 '20 at 10:18

There is no such property to reverse the flow in CSS-Grid.

One solution (which does not scale nicely) is to use nth-last-child in this situation to designate which column is required.

html{
  font-size: 16px;
}
.grid-container {
  background-color: coral;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: .25rem;
  padding: 1rem;
}
.grid-child{
  background-color: saddlebrown;
  color: white;
  padding: 1rem;
}

.grid-child:nth-last-child(1) {
  grid-column:5;
}
.grid-child:nth-last-child(2) {
  grid-column:4;
}
.grid-child:nth-last-child(3) {
  grid-column:3;
}

.grid-child:nth-last-child(4) {
  grid-column:2;
}
.grid-child:nth-last-child(5) {
  grid-column:1;
}

<html>

<body>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
    <div class="grid-child">5</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
    <div class="grid-child">4</div>
  </div>
  <div class="grid-container">
    <div class="grid-child">1</div>
    <div class="grid-child">2</div>
    <div class="grid-child">3</div>
  </div>
</body>

</html>

Thank you for your answer. This works for me now. You've got me thinking though - is it possible to achieve the same result using flexbox? — Ganesh Iyer, Aug 02 '20 at 11:42

Puneet Sharma · Answer 2 · 2020-08-02T12:21:26.617

0

If that you want it this way

direction: rtl;

if issue with direction hope it solve it.

last answer:

justify-items: center;

Doesn't matter.

edited Aug 02 '20 at 12:21

answered Aug 02 '20 at 09:22

Puneet Sharma

307
3
9

Please add some explanation to your answer such that others can learn from it – Nico Haase Aug 02 '20 at 10:45
Sorry, maybe there's something I'm not following. justify-items only adjusts the position of each child inside the grid column. I was looking at how to adjust the start of the whole grid. – Ganesh Iyer Aug 02 '20 at 11:40

score 0 · Answer 3 · answered Aug 02 '20 at 23:35

We can make use of auto-fit Which only creates columns when needed unlike auto-fill and the current setup which creates columns even when not needed.

This will work if we know the maximum number of columns we're going to have we'll go with 5.

Our grid-template-columns becomes like this:

grid-template-columns: repeat(auto-fit, minmax(0px,calc((100% - ( .25rem * 4)) / 5)));

Instead of the predefined 5 columns we calculate 5 columns from the width of the parent, Subtracting the grid-gap

And finally we apply justify-content: flex-end;

.grid-container {
    background-color: coral;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0,calc((100% - ( .25rem * 4)) / 5)));
    grid-gap: .25rem;
    padding: 1rem;
    justify-content: flex-end;
}

.grid-child {
    background-color: saddlebrown;
    color: white;
    padding: 1rem;
}

<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
  <div class="grid-child">5</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
  <div class="grid-child">4</div>
</div>
<div class="grid-container">
  <div class="grid-child">1</div>
  <div class="grid-child">2</div>
  <div class="grid-child">3</div>
</div>

How to use justify-content: end in conjunction with 1fr in CSS grids?

3 Answers3