Changing CSS grid column sizes based on content?

Question

Struggling with CSS grid and could do with a bit of help.

I've got a <section> item with 4 items, these should be separated 2 on the left, 2 on the right, centered vertically.

However, when my Vue component state variable changes, the items are filtered down to just the two on the right.

How do I keep the correct format of the grid so the two columns stay on the right when there are less items in the grid?

So far I have this for the main outer div...

display: grid;
grid-template-columns: 1fr auto;
grid-column-gap: 1.25em;
align-items: center;

and this for my two inner right divs

display: grid;
justify-content: right;
align-content: center;

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Reproducible Example — Paulie_D
– Paulie_D, Commented Aug 27, 2021 at 13:30

Thomas Tromp · Accepted Answer · 2021-08-27 13:36:20Z

1

For your inner div:

Instead of using justify-content: right;, which isn't a thing, use: justify-content: flex-end;

Justify-content: flex-end; places everything at the end, depending what the flex-direction is. The same counts for justify-content: flex-start; of course, which places everything at the beginning.

edited Aug 27, 2021 at 13:36

answered Aug 27, 2021 at 13:25

Thomas Tromp

1521 silver badge10 bronze badges

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

Comments

Nikola Pavicevic · Accepted Answer · 2021-08-27 21:54:47Z

0

Maybe this way with extra div to hold right items:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  grid-column-gap: 1.25em;
  align-items: center;
  background-color: grey;
  padding: 1em;
  margin-bottom: 1em;
}
.right {
  justify-self: end;
  display: flex;
  align-items: center;
}
.item {
  background-color: orange;
  margin: 0 1em;
  padding: 2em;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="right">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="container">
  <div class="right">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

edited Aug 27, 2021 at 21:54

answered Aug 27, 2021 at 14:02

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

Changing CSS grid column sizes based on content?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related