CSS grids make life so much easier 😁
CSS grids make life so much easier 😁
Grids are very powerful for creating layouts like this. Let's break down how this works:
👉🏻 grid-template-columns is the property used to create the track for columns
👉🏻 repeat is used to repeat a given value. Here we are repeating for 3 columns.
👉🏻 minmax says how much space a given grid item can take. Here we have specified 0 to 1fr
👉🏻 1fr is a unit of the remaining space available
A common beginner mistake would be to use repeat(3, 1fr) which would work, but break the layout when one of the child overflows.
Feel free to share your thoughts in the comments! 💬
#css
#csstricks
#html
#javascript
#webdevelopment
#webdesign
#frontend
#frontenddeveloper
#webdeveloper
post by post by @baby_wolf_codes
