Move CSS Grid content from one column to another

Question

I am learning CSS Grid and cannot figure out how to move the content from first column to the second column (concerning Desktop view +1200 Px). I want to achieve some basic center alignment, just like with margin: 0 auto. Thats why I put 1fr before the 4 columns and 1fr after the 4 columns (grid-template-columns: 1fr repeat(4, minmax(auto, 250px)) 1fr;). But the content gets fit into the fist column - which is meant to center the 4 content columns. I hope you understand what I mean. Please expand window to see the Desktop width.

<https://jsfiddle.net/freshynek/d3bzLgvh/>.

Please add all relevant code in the question itself. Ping me when it's done and I'll reverse my downvote. — Michael Benjamin
– Michael Benjamin, Commented Feb 17, 2021 at 16:23

Irene Liberali · Accepted Answer · 2021-02-10 16:51:30Z

2

The content is meant to go into the first column. You should remove that 1fr from your template (it's a hack and will not work). Instead use justify-content: center; to center div.grid.

Edit: In theory you could add an empty div (<div></div>) before your first card. So the first column would be empty and the second column would contain your desired content. However as I said, this is a hack and if you're learning how to use grid you're better off not relying on hacks.

answered Feb 10, 2021 at 16:51

Irene Liberali

4012 silver badges6 bronze badges

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

1 Comment

Freshynek Over a year ago

O.K. I edited the code according to your suggestion. Is this correct now? jsfiddle.net/freshynek/d3bzLgvh/5.

Collectives™ on Stack Overflow

Move CSS Grid content from one column to another

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related