CODEWITHSUNDEEP
csscss-grid
Freshynek
Freshynek

Reputation: 25

Move CSS Grid content from one column to another

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/>.

Upvotes: 0

Views: 1066

Answers (1)

Irene Liberali
Irene Liberali

Reputation: 401

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.

Upvotes: 2

Related Questions