CODEWITHSUNDEEP
css-grid
ccdavies
ccdavies

Reputation: 1606

Aligning columns using CSS Grid

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.

Upvotes: 0

Views: 33

Answers (1)

jrob11
jrob11

Reputation: 315

Try this:

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

I removed all other CSS when I tried this

Upvotes: 1

Related Questions