Requirements

• Basic understanding of HTML and CSS.
• A web browser is required. We will use Google Chrome and will frequently make use of the Chrome Dev Tools.
• A coding editor is required. We will use VS Code with the Live Server plugin.

Description

This course is aimed to help you elevate your HTML webpage designs by applying many of the properties provided by the Grid layout model. In this course we will explore both the properties that can be applied to a parent grid container and the properties that can be applied to a child grid item.

The Parent Grid container properties that will be addressed include:

Grid Template Columns - Learn how to declare explicit columns within your grid using this property

Grid Template Rows - Learn how to declare explicit rows within your grid using this property

Grid Auto Rows - Understand how to generate implicit rows using this property

Grid Auto Columns - Understand how to generate implicit columns using this property

Grid Auto Flow - Learn how to use this property to control the flow of the grid

Grid Column Gap - Learn how to use this property to add gaps between the columns within a grid

Grid Row Gap - Learn how to use this property to add gaps between the rows within a grid

Grid Gap - Understand how to use this property shorthand to define a gap between the rows and columns within a grid

Grid Template Areas - Discover how to declare areas within your grid layout

Grid Template - Discover the shorthand to apply grid-template-rows, grid-template columns and grid-template-areas property

Grid – Discover the shorthand to apply all of the implicit and explicit properties in a single declaration

Justify Items - Understand how to position the grid items horizontally within a grid cell

Align Items - Understand how to position the grid items vertically within a grid cell

Place Items - Discover the shorthand for applying justify-items and align-items properties in a single declaration

Justify Content - Learn how to position the columns horizontally within the grid container

Align Content - Learn how to position the rows vertically within the grid container

Place Content - Discover the shorthand to apply the justify-content and align-content properties in a single declaration

The Child Flex Item properties that will be addressed include:

Grid Column Start And End - Discover how to size grid items by specifying a grid column start and grid column end value

Grid Row Start And End - Discover how to size grid items by specifying a grid row start and grid row end value

Grid Row/Grid Column - Explore the shorthand properties grid row and grid column

Grid Area - Learn how to use this property to define the grid item location and size

Justify Self – Understand how to use this property to self align a grid item horizontally within a grid cell

Align Self – Understand how to use this property to self align a grid item vertically within a grid cell

Order – Learn how to use this property for controlling the ordering of the grid items within a grid

This course will also address the MATH involved when using properties like grid-template-columns and grid-template-rows so you know precisely how the track sizes you define for these properties will effect the size of your grid items.

Who this course is for:

• Developers who wish to expand their CSS knowledge by learning CSS Grid
• Developers who would like to design their HTML webpages uing the CSS Grid layout model