Overview
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
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
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.
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.
Joshan Grewal
Hi I'm Joshan Grewal, a web developer with 5 years commercial experience. I also hold a Bachelor's degree in Computer Science to which I obtained First Class Honours. During my time at college and university I learnt many languages and frameworks such as HTML, CSS, Javascript, Java, PHP, Laravel and SQL. I've also had exposure to JQuery, Angular and Vue.
After my studies I then worked for a company for 4 years as a PHP developer which taught me a great deal on the best practices for writing efficient code. I've now got to a stage in my career where I want share the knowledge I've gained in website development to inspire others to take up a career within the tech industry. I find the easiest way to pick up a skill is to continuously practice it. I will aim to provide all the knowledge I've acquired over the years to the best of my ability to ensure you are fully equipped to start your journey within the tech industry.