Modern CSS Grid Layouts

# Modern CSS Grid Layouts CSS Grid has revolutionized web layout design. Let's explore how to create modern, responsive layouts with Grid. ## Basic Grid Setup ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } ``` ## Common Layout Patterns ### Holy Grail Layout ```css .holy-grail { display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-template-rows: auto 1fr auto; grid-template-columns: 200px 1fr 200px; min-height: 100vh; } .header { grid-area: header; } .nav { grid-area: nav; } .main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; } ``` ## Responsive Grid ```css .responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } ``` ## Grid vs Flexbox - **Grid**: Two-dimensional layouts (rows and columns) - **Flexbox**: One-dimensional layouts (row or column) ## Advanced Techniques ```css .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 10px; } .item { grid-row-end: span 20; } ``` CSS Grid makes complex layouts simple and maintainable. Start using it in your projects today!