Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Build Modern Layouts with CSS Grid

via egghead.io

Overview

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.

Syllabus

  • 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

Taught by

Hiroko Nishimura

Reviews

4.7 rating at egghead.io based on 109 ratings

Start your review of Build Modern Layouts with CSS Grid

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.