CSS Grid is a relatively new and unused concept to CSS. It’s very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies.
In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:-
-
All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.
-
Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level.
-
The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.
-
Grid areas and how it helps simplify responsive web design
-
The concept of implicit and explicit grids and what the differences are
-
A deep look into the Autoplacement algorithm
-
Animation at a high level and what works currently with CSS Grid
-
How to convert some layouts in Flexbox to use CSS Grid instead
-
When to use Flexbox over CSS Grid
Once we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:-
-
Column based layout
-
Basic Sidebar layout
-
Vertical Text alignment
-
Modal alignment
-
Stick footer layout
-
Formatting form fields
And hopefully in future much more. We then look at some advance layout topics such as:-
-
The Holygrail layout
-
The Media Objects layout
-
A Viewport Friendly Image Gallery
-
A Responsive Image Gallery
-
An Animated Sidebar
-
A Monthly Calendar layout
-
A Newspaper Cover layout
-
A Responsive Twitter Clone Layout
-
A Responsive Movie Gallery
Then if you haven’t had enough, we have 3 real life application examples that will give you the experience you need. They are:-
-
A Chat UI interface
-
An Uber Eats Clone Responsive Application
-
A YouTube Clone Responsive Application
Grid Containers and Tracks
-
1Introduction
Welcome to the course Mastering CSS Grid
-
2What you need for this course. PLEASE WATCH!!
In this video I talk about what the requirements are for taking this course.
-
3Rating this course. PLEASE ALSO WATCH
In this video I talk about the best way to rate and review this course.
-
4CSS Grid 101
In this video we look at what CSS Grid is and how it is beneficial for layouts. We also cover some terminology and browser support.
Controlling Grid Items
-
5Creating Grid Containers
In this video, you will learn how to create your very first Grid Container. We will look at both types of Grid Containers as well.
-
6Defining Rows and Columns
In this video you will learn how to specify the number of rows and columns for your grid, and their respective sizes.
-
7The grid property
In this video we take a first look at the grid property and how we can use it to define our rows and columns.
-
8Fixed and Percentage Track Sizing
In this video we look at how we can size our row and column tracks using pixels and percentages.
-
9Track Sizing based on Font Size
In this video we look at how we can size our row and column tracks using em and rem units.
-
10Track Sizing based on Viewport
In this video we look at how we can size our row and column tracks using vw, vh, vmax and vmin units.
-
11Auto Track Sizes
In this video we will cover the special auto value that we can use for the size of our row and column tracks.
-
12The Fraction (fr) Unit
In this video we will cover the new fraction (fr) unit and how we can use it to allocate remaining space to grid items.
-
13Fractions vs Auto
In this video we quickly cover the similarities and differences between using the auto value vs using fractions when sizing our grid tracks.
-
14The minmax function
In this video we will cover how we can set a minimum and a maximum size of a grid track using the new minmax function.
-
15Minmax function gotchas
In this video I quickly cover some of the gotchas that I found when using the minmax function.
-
16Understanding max-content and min-content
In this video I quickly cover what the special min-content and max-content values do when using them for sizing our grid tracks.
-
17The fit-content function
In this video I cover the new fit-content function, which gives us the ability to set a max limit of a column tracks regardless of how much text exists in each grid item for that column.
-
18The repeat function
In this video we look at the new repeat function, what a track list is, and how we can use both of these concepts together to simplify of row and column definitions.
-
19Managing Grid Gaps
In this video we look at Grid Gaps, and how we can set up different gap sizes between both column and row tracks.
-
20Grid Gap Updates!!!
I quickly explain the changes to grid-column-gap, grid-row-gap and grid-gap.
-
21Nested grids
In this video I quickly show you how you can nest a grid container inside of a grid item of another grid container.
-
22A note on nesting
Just a quick note on nesting and how grid items can also be grid containers.
Controlling Alignment
-
23Reordering Grid Items
In this video we take a look at the first way we can move grid items around in our grid container. We can order them using the order property.
-
24Moving Grid Items to different columns
In this video we look at how we can explicit set which column track a specific grid item could be placed inside of a grid container.
-
25Moving Grid Items to different rows
In this video we look at how we can explicit set which row track a specific grid item could be placed inside of a grid container.
-
26Moving Grid Items to non adjacent cells
In this video we look at how we can explicit set exactly which grid cell a grid item could be placed, inside of a grid container..
-
27Grid Item spanning basics
In this video we look at how we can make grid items span over multiple column tracks, row tracks, or both.
-
28The span keyword
In this video we look at the special span keyword, and how we can use it simplify the spanning of grid items inside a grid container.
-
29Grid Item spanning gotchas
In this video, we quickly cover the gotchas that I noticed when spanning grid items inside of a grid container.
-
30Naming Grid Lines
In this video we cover how to name grid lines and how to use these line names to place our grid items.
-
31Spanning Grid Items based on line names
In this video we cover how to use line names to assist with spanning grid items.
-
32Using multiple line names
In this video we cover how to give multiple line names to the same grid line.
-
33Lines names and the repeat function
In this video we cover how we can use line names in conjunction with the repeat function.
-
34The grid-column property
In this video we look at the grid-column property, and how we can use it to simplify both positioning and spanning grid items along column tracks.
-
35The grid-row property
In this video we look at the grid-row property, and how we can use it to simplify both positioning and spanning grid items along row tracks.
-
36Positioning Grid Items using the grid-area property
In this video we look at the grid-area property, and how we use it to place grid items into specific cells in the grid.
-
37Spanning Grid Items using the grid-area property
In this video we look at how the grid-area is used to span grid items over both column and row tracks.
-
38The grid property reviewed
In this video, we update our knowledge on the grid property, by learning how to specify line names when using it.
Responsive Grids
-
39Aligning Row Tracks
In this video we cover how to change the alignment / distribution, of all our row tracks in our grid container.
-
40Aligning Column Tracks
In this video we cover how to change the alignment / distribution, of all our column tracks in our grid container.
-
41The place-content property
In this video we look at the place-content property, and how we can use it to control the alignment / distribution of both row and column tracks.
-
42Vertically Aligning Grid Items
In this video we look at how to vertically align the content inside of all our grid items of a grid container.
-
43Horizontally Aligning Grid Items
In this video we look at how to horizontally align the content inside of all our grid items of a grid container.
-
44The place-items property
In this video we look at the place-items property, and how we can use it to control the alignment of content inside of all our grid items of a grid container from both a vertical and horizontal direction.
-
45Vertically Aligning an Individual Grid Item
In this video we look at how to vertically align the content inside of an individual grid item.
-
46Horizontally Aligning an Individual Grid Item
In this video we look at how to horizontally align the content inside of an individual grid item.
-
47The place-self property
In this video we look at how to both vertically and horizontally align the content inside of an individual grid item.
Implicit Grids and Autoplacement
-
48A review on media queries
In this video we quickly review media queries. A concept needed to understand responsive web design. This is needed so we can properly configure CSS Grid over different device sizes.
-
49Setting viewport for mobile and tablet devices
In this video, we quickly cover how we can prepare our HTML files so that on mobile it will display appropriately.
-
50Positioning Grid Items using areas
In this video, we learn how to position grid items using the concept of areas. Areas are used to simplify the positioning of items over different device sizes.
-
51Spanning Grid Items using areas
In this video, we now cover how to span grid items using areas.
-
52Defining empty grid cells
In this video we cover how to mask a specific grid cell in our grid container as empty using areas.
-
53Gotchas with grid-template-areas
In this video we cover some of the gotchas that you have to look out for when using grid-template-areas property.
-
54Building responsive grids without media queries
In this video we learn another clever way of making a responsive grid, by just using the repeat function.
-
55The grid property reviewed again
In this video we once again review the grid property, taking the concepts covered in this section and applying it to this property.
CSS Grid Extras
-
56Implicit vs explicit grids
In this video we get a clearer understand of the difference between what is deemed an explicit grid, and what is implicit.
-
57An introduction to the Autoplacement Algorithm
In this video I quick introduce the Autoplacement Algorithm and define all the criteria that makes it up.
-
58Understanding Flow
In this video I quickly cover what Flow means in regards to the Autoplacement algorithm and the options you have available.
-
59Controlling Flow
In this video we show you how to change the flow of items inside of your grid container using the grid-auto-flow property. We then talk a little more about how items flow inside of the container and also how to size implicit column tracks.
-
60Understanding order-modified document order
In this video we go over the algorithm used to determine the order to which grid items are placed inside our grid containers.
-
61Understanding locking
In this video we talk about the concept of locking and how it affects how grid items are placed within our grid containers.
-
62Locking grid items
In this video we extend our knowledge from the previous video and look at locking from a practical level.
-
63Locking and responsive web design
In this video I explain how the grid-template-areas and grid-area properties can be visualised to our locking examples but using line names instead of numbers.
-
64Locking and responsive web design in action
In this video I go through some practical examples of how locking works when using the grid-template-areas and grid-area properties.
-
65Understanding Grid Spans
In this video I explain Grid Spans and how it affects the placement of grid items
-
66Grid Spans in action
In this video we look at some practical examples of how grid spanning works.
-
67Understanding packing
In this video I quickly explain what sparse and dense packing is and how it affects how items are placed inside a grid container.
-
68Packing in action
In this video we look at how to change the packing using the grid-auto-flow property.
-
69Bringing it all together part 1
In this video we put all the knowledge over the last few videos to get a better understanding of the Autoplacement Algorithm
-
70Bringing it all together part 2
In this video we continue looking at examples to better understand the Autoplacement Algorithm
-
71The grid property and Autoplacement part 1
In this video we take all the learning we have gathered in this section and apply them to the grid property.
-
72The grid property and Autoplacement part 2
In this video we look at a few gotchas that you might run into when setting certain Autoplacement values on the grid property.
Some Simple Layouts
-
73The grid-template property
In this video I quickly show you the grid-template property and why you should not use it anymore.
-
74Absolute positioning
In this video we compare how absolute positioning works in a grid container vs a regular block level element.
-
75Animating grids
In this video, I give you a current snapshot of the animations that are supported with CSS Grid.
-
76Simplifying Flexbox layouts with CSS Grid
In this video we take a look at some layouts that are built using Flexbox and convert them to use CSS Grid instead.
-
77More simplifying Flexbox layouts
In this video we continue on from the last video, looking at some more layouts that are built using Flexbox, and converting them to grids.
-
78When to use Flexbox over CSS Grid
In this video I show you when it's the right situation to use Flexbox over CSS Grid.
-
79A note of grid item sizing vs flex item sizing
Just a quick note grid items and how they can be sized.
-
80Grid items and the box model
In this video we look at the box model properties of an individual grid item and see how changing them affects itself and its parent container.
Some Advanced Layouts
-
81Building a 4 column layout
In this video I show you a couple of ways of setting up a 4 column layout using CSS Grid.
-
82Building a sidebar
In this video we cover the simple problem of building a layout that contains a simple sidebar on the left, followed with the main content on the right.
-
83Vertically aligning text
In this video we look at a couple of ways of controlling the vertical alignment of text using CSS Grid.
-
84Centering a modal dialog
In this video we look at how we can create a modal dialog and center it into the middle of the screen using CSS Grid.
-
85Creating a sticky footer
In this video we look at how we can implement a sticky footer easily using CSS Grid.
-
86Basic form formatting
In this video we look at how to format a typical form, and align both labels and their associated controls.