**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** CSS Grid: Advanced Layout System **Topic:** Creating complex, responsive, two-dimensional layouts with CSS Grid. **Overview:** In this topic, we'll delve into creating complex, responsive, two-dimensional layouts using CSS Grid. We'll explore how to define multiple tracks, place items in a grid, and create a fully responsive layout that adapts to different screen sizes. **Defining a Two-Dimensional Grid:** To create a two-dimensional grid, you need to define both rows and columns. You can do this by using the `grid-template-columns` and `grid-template-rows` properties. ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ``` In this example, we're defining a grid with three columns and two rows. We're using the `repeat()` function to create a repeating pattern of equal-width columns and rows. **Placing Items in a Two-Dimensional Grid:** To place items in a two-dimensional grid, you can use the `grid-column` and `grid-row` properties. These properties allow you to specify the starting and ending grid tracks for each item. ```css .item1 { grid-column: 1 / 2; grid-row: 1 / 2; } .item2 { grid-column: 2 / 3; grid-row: 1 / 2; } .item3 { grid-column: 1 / 3; grid-row: 2 / 3; } ``` In this example, we're placing three items in a two-dimensional grid. Item 1 is placed in the first column and first row, Item 2 is placed in the second column and first row, and Item 3 is placed in the first column and second row, spanning two columns. **Responsive Two-Dimensional Grids:** To create a responsive two-dimensional grid, you can use the `grid-template-columns` and `grid-template-rows` properties with the `repeat()` function and the `auto-fit` and `auto-fill` keywords. ```css .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); } ``` In this example, we're defining a responsive two-dimensional grid with a minimum grid track size of 200px and a maximum grid track size of 1 fractional unit. We're using the `auto-fit` and `auto-fill` keywords to automatically fit and fill the available space. **CSS Grid vs. Flexbox:** While Flexbox is well-suited for one-dimensional layouts, CSS Grid is more powerful for two-dimensional layouts. CSS Grid provides more flexibility and control over the placement of items in a grid. **Example Use Case:** A responsive landing page with a complex layout that adapts to different screen sizes. For example, a landing page with a hero section, a feature section, and a call-to-action section. **Practical Takeaways:** * Use the `grid-template-columns` and `grid-template-rows` properties to define a two-dimensional grid. * Use the `grid-column` and `grid-row` properties to place items in a two-dimensional grid. * Use the `repeat()` function and the `auto-fit` and `auto-fill` keywords to create a responsive two-dimensional grid. * Use CSS Grid for two-dimensional layouts and Flexbox for one-dimensional layouts. **Recommended Reading:** * MDN Web Docs: [CSS Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) * W3C: [CSS Grid Layout Module Level 1](https://www.w3.org/TR/css-grid-1/#grid-item-alignment) **What's Next:** In the next topic, we'll explore best practices for modern web typography. **Leave a Comment or Ask for Help:** Have any questions or need help with creating complex, responsive, two-dimensional layouts with CSS Grid? Please leave a comment below!