Aligning columns using CSS Grid

Question

In CSS Grid, I'm trying to find the best approach to aligning 3 columns, first column to the left, then second and third aligned to the right.

The second and third columns are both dynamic widths, so I need the third column to wrap to its contents width, then push the second columns content to the 'end', so both appear to fill to the right.

I have this working(ish), but I don't think its the best/correct approach. By setting grid-template-columns on the parent container to 200px 1fr, both second and third columns align as I'd like, but I suspect this isn't the correct, or best approach.

Is anyone able to explain how this should be done?

Here is an example of how I have it currently working:

https://jsfiddle.net/Lb0qc7ep/

I am using CSS Grid as at different breakpoints, I need to rearrange the column orders.

jrob11 · Accepted Answer · 2021-04-28 13:55:28Z

1

Try this:

.container {
  display: grid;
  grid-template-columns: 1fr auto auto;     
  grid-gap: 30px;
}

I removed all other CSS when I tried this

edited Apr 28, 2021 at 13:55

answered Apr 28, 2021 at 13:50

jrob11

3151 silver badge10 bronze badges

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

2 Comments

jrob11 Over a year ago

You will need to arrange the order if you want to manipulate it. But I think this is the best approach for aligning 1 left and 2 right. You can also add a max-width to .item-2 and .item-3 to limit their width.

ccdavies Over a year ago

Thank you!! That makes so much more sense.

Collectives™ on Stack Overflow

Aligning columns using CSS Grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related