Build Modern Layouts with CSS Grid

The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.
You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid.
You'll also learn how to control a grid's columns and rows and define the size of each respectively.
By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

• Define Root Colors Variables and Set up Box-Sizing for a CSS Layout
• Introduction to CSS Grid Rows and Columns with display: grid
• Specify a Gutter in CSS Grid with gap (grid-gap)
• Utilize Firefox Developer Tools to Visualize CSS Grid Styles
• Determine CSS Grid Sizing with the Fraction Unit (fr)
• Define a Page Layout with CSS Grid Using grid-template-areas
• Align Content by Adding Styling to a CSS Grid Layout
• Build a Navigation Bar with CSS Grid Using grid-auto-flow
• Create a Nested CSS Grid Layout
• Use the repeat() CSS Function to Efficiently Define CSS Grid Rows and Columns
• Define Size Range with the minmax() CSS Function to Create Responsive Grid Items
• Create a Responsive Layout Using Media Queries with CSS Grid
• Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical