Introduction To Css Grid

A course designed to give you an overview in using CSS Grid to design your HTML webpages

What you'll learn

An overview of Grid

How to use various properties that apply to a parent grid container

How to use various properties that apply to a child grid item

How to use the principles of Grid to design a HTML webpage

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 propertyGrid Template Rows - Learn how to declare explicit rows within your grid using this propertyGrid Auto Rows - Understand how to generate implicit rows using this propertyGrid Auto Columns - Understand how to generate implicit columns using this propertyGrid Auto Flow - Learn how to use this property to control the flow of the gridGrid Column Gap - Learn how to use this property to add gaps between the columns within a gridGrid Row Gap - Learn how to use this property to add gaps between the rows within a gridGrid Gap - Understand how to use this property shorthand to define a gap between the rows and columns within a gridGrid Template Areas - Discover how to declare areas within your grid layoutGrid Template - Discover the shorthand to apply grid-template-rows, grid-template columns and grid-template-areas propertyGrid – Discover the shorthand to apply all of the implicit and explicit properties in a single declarationJustify Items - Understand how to position the grid items horizontally within a grid cellAlign Items - Understand how to position the grid items vertically within a grid cellPlace Items - Discover the shorthand for applying justify-items and align-items properties in a single declarationJustify Content - Learn how to position the columns horizontally within the grid containerAlign Content - Learn how to position the rows vertically within the grid containerPlace Content - Discover the shorthand to apply the justify-content and align-content properties in a single declarationThe 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 valueGrid Row Start And End - Discover how to size grid items by specifying a grid row start and grid row end valueGrid Row/Grid Column - Explore the shorthand properties grid row and grid columnGrid Area - Learn how to use this property to define the grid item location and sizeJustify Self – Understand how to use this property to self align a grid item horizontally within a grid cellAlign Self – Understand how to use this property to self align a grid item vertically within a grid cellOrder – Learn how to use this property for controlling the ordering of the grid items within a gridThis 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.

Overview

Section 1: Introduction

Lecture 1 Introduction To Grid

Lecture 2 Overview Of Grid

Section 2: Overview Of Parent Grid Container Properties

Lecture 3 Parent Grid Container Properties Overview

Section 3: Grid Template Columns

Lecture 4 Grid Template Columns Overview

Lecture 5 Grid Template Columns Demonstration

Lecture 6 Additional Information On Grid Template Columns

Section 4: Grid Template Rows

Lecture 7 Grid Template Rows Overview

Lecture 8 Grid Template Rows Demonstration

Lecture 9 Additional Information On Grid Template Rows

Section 5: Explicit Vs Implicit Grid

Lecture 10 Explicit vs Implicit Grid Overview

Lecture 11 Explicit vs Implicit Grid Demonstration

Section 6: Grid Auto Rows, Grid Auto Columns And Grid Auto Flow

Lecture 12 Grid Auto Rows, Grid Auto Columns, Grid Auto Flow Overview

Lecture 13 Grid Auto Rows, Grid Auto Columns, Grid Auto Flow Overview Demonstration

Section 7: Grid Column Gap And Grid Row Gap

Lecture 14 Grid Column Gap And Grid Row Gap Overview

Lecture 15 Grid Column Gap And Grip Row Gap Demonstration

Section 8: Grid Template Areas

Lecture 16 Grid Template Areas Overview

Lecture 17 Grid Template Areas Demonstration

Section 9: Grid Template

Lecture 18 Grid Template Overview

Lecture 19 Grid Template Demonstration

Section 10: Grid Shorthand

Lecture 20 Grid Shorthand Overview

Lecture 21 Grid Shorthand Demonstration

Section 11: Justify Items And Align Items

Lecture 22 Justify Items And Align Items Overview

Lecture 23 Justify Items And Align Items Demonstration

Section 12: Place Items

Lecture 24 Place Items Overview

Lecture 25 Place Items Demonstration

Section 13: Justify Content

Lecture 26 Justify Content Overview

Lecture 27 Justify Content Demonstration

Section 14: Align Content

Lecture 28 Align Content Overview

Lecture 29 Align Content Demonstration

Section 15: Place Content

Lecture 30 Place Content Overview

Lecture 31 Place Content Demonstration

Section 16: Overview Of Child Grid Item Properties

Lecture 32 Child Grid Item Properties Overview

Section 17: Grid Column/Row Start And End

Lecture 33 Grid Column/Row Start And End Overview

Lecture 34 Grid Column/Row Start And End Demonstration

Section 18: Grid Area

Lecture 35 Grid Area Overview

Lecture 36 Grid Area Demonstration

Section 19: Justify Self

Lecture 37 Justify Self Overview

Lecture 38 Justify Self Demonstration

Section 20: Align Self

Lecture 39 Align Self Overview

Lecture 40 Align Self Demonstration

Section 21: Place Self

Lecture 41 Place Self Overview

Lecture 42 Place Self Demonstration

Section 22: Order

Lecture 43 Order Overview

Lecture 44 Order Demonstration

Section 23: Auto Sizing Columns/Rows - Auto Fit vs Auto Fill

Lecture 45 Auto Sizing Columns/Rows - Auto Fit vs Auto Fill Overview

Lecture 46 Auto Sizing Columns/Rows - Auto Fit vs Auto Fill Demonstration

Section 24: Nested Grid - Subgrid

Lecture 47 Nested Grid - Subgrid Overview

Lecture 48 Nested Grid - Subgrid Demonstration

Section 25: Project Example Using Grid

Lecture 49 Project Example Using Grid

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