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.

Paulie_D · Accepted Answer · 2020-08-02 10:18:06Z

3

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>

answered Aug 2, 2020 at 10:18

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ganesh Iyer Over a year ago

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?

Paulie_D Over a year ago

Not unless the elements are of a fixed size.

Puneet Sharma · Accepted Answer · 2020-08-02 12:21:26Z

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 2, 2020 at 12:21

answered Aug 2, 2020 at 9:22

Puneet Sharma

3373 silver badges10 bronze badges

2 Comments

Nico Haase Over a year ago

Please add some explanation to your answer such that others can learn from it

Ganesh Iyer Over a year ago

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.

user7148391 · Accepted Answer · 2020-08-02 23:35:09Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related