**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** CSS Grid: Advanced Layout System **Topic:** Defining grid containers and tracks (rows and columns) **Introduction** In the previous topics, we explored the fundamentals of Flexbox and introduced CSS Grid as a powerful layout system. Now, we'll dive deeper into CSS Grid by learning how to define grid containers and tracks (rows and columns). This topic will cover the essential properties and techniques for creating a robust grid structure, which is crucial for building complex, responsive layouts. **Defining Grid Containers** To create a grid container, you need to apply the `display` property with a value of `grid` or `inline-grid` to the container element. This will transform the container into a grid container, allowing you to define rows and columns. ```css .grid-container { display: grid; /* or */ display: inline-grid; } ``` **Defining Grid Tracks (Rows and Columns)** Grid tracks are the rows and columns that make up the grid structure. You can define grid tracks using the `grid-template-columns` and `grid-template-rows` properties. **grid-template-columns** The `grid-template-columns` property is used to define the columns of the grid. You can specify the width of each column using length units (e.g., `px`, `%`, `em`), or use the `repeat()` function to create a repeating pattern. ```css .grid-container { display: grid; grid-template-columns: 200px 300px 400px; /* defines three columns with different widths */ } ``` Alternatively, you can use the `repeat()` function to create a repeating pattern: ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* creates three equal columns */ } ``` **grid-template-rows** The `grid-template-rows` property is used to define the rows of the grid. You can specify the height of each row using length units (e.g., `px`, `%`, `em`), or use the `repeat()` function to create a repeating pattern. ```css .grid-container { display: grid; grid-template-rows: 200px 300px 400px; /* defines three rows with different heights */ } ``` Alternatively, you can use the `repeat()` function to create a repeating pattern: ```css .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); /* creates three equal rows */ } ``` **Grid Gaps** Grid gaps are the spaces between grid tracks. You can define grid gaps using the `grid-column-gap` and `grid-row-gap` properties. ```css .grid-container { display: grid; grid-column-gap: 20px; /* defines a horizontal gap between columns */ grid-row-gap: 20px; /* defines a vertical gap between rows */ } ``` Alternatively, you can use the shorthand `grid-gap` property to define both horizontal and vertical gaps: ```css .grid-container { display: grid; grid-gap: 20px; /* defines both horizontal and vertical gaps */ } ``` **Key Concepts and Takeaways** * To create a grid container, apply the `display` property with a value of `grid` or `inline-grid` to the container element. * Use the `grid-template-columns` and `grid-template-rows` properties to define the rows and columns of the grid. * Use the `repeat()` function to create repeating patterns for columns and rows. * Define grid gaps using the `grid-column-gap`, `grid-row-gap`, or `grid-gap` properties. * Experiment with different grid track sizes and grid gaps to achieve the desired layout. **Practical Exercise** Create a grid container with three columns and three rows. Define the columns using the `repeat()` function and set the column widths to 1fr. Create a vertical gap between rows using the `grid-row-gap` property. Style the grid items to make them visible. **Conclusion** Defining grid containers and tracks is a crucial step in building robust, responsive layouts with CSS Grid. By understanding the `grid-template-columns` and `grid-template-rows` properties, you can create complex grid structures that adapt to different screen sizes. In the next topic, we'll explore how to place elements in a grid using grid-template-areas, grid-column, and grid-row. Feel free to leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this topic.