CODEWITHSUNDEEP
htmlcsscss-grid
Ganesh Iyer
Ganesh Iyer

Reputation: 23

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

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.

Upvotes: 2

Views: 394

Answers (3)

user7148391
user7148391

Reputation:

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>

Upvotes: 0

Puneet Sharma
Puneet Sharma

Reputation: 317

enter image description here 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.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115288

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>

Upvotes: 3

Related Questions