Mastering CSS Grid 2020 - With 3 cool projects
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27,364 students enrolled

Mastering CSS Grid 2020 - With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
27,364 students enrolled
Created by Daryl Duckmanton
Last updated 10/2019
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17 hours on-demand video
  • 4 articles
  • 58 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to implement responsive layouts using CSS Grid
  • How to build regular layouts in CSS Grid
  • All properties that are part of the CSS Grid Specification
  • How to build commonly used sites such as YouTube using CSS Grid
Course content
Expand all 147 lectures 17:15:30
+ Introduction
4 lectures 31:42

Welcome to the course Mastering CSS Grid

Preview 09:23

In this video I talk about what the requirements are for taking this course.

Preview 04:58

In this video I talk about the best way to rate and review this course.

Preview 03:23

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.

Preview 13:58
+ Grid Containers and Tracks
18 lectures 01:29:13

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.

Preview 02:28

In this video you will learn how to specify the number of rows and columns for your grid, and their respective sizes.

Defining Rows and Columns
08:38

In this video we take a first look at the grid property and how we can use it to define our rows and columns.

The grid property
01:44

In this video we look at how we can size our row and column tracks using pixels and percentages.

Fixed and Percentage Track Sizing
03:27

In this video we look at how we can size our row and column tracks using em and rem units.

Track Sizing based on Font Size
03:58

In this video we look at how we can size our row and column tracks using vw, vh, vmax and vmin units.

Track Sizing based on Viewport
07:59

In this video we will cover the special auto value that we can use for the size of our row and column tracks.

Auto Track Sizes
05:46

In this video we will cover the new fraction (fr) unit and how we can use it to allocate remaining space to grid items.

Preview 10:14

In this video we quickly cover the similarities and differences between using the auto value vs using fractions when sizing our grid tracks.

Fractions vs Auto
02:45

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.

The minmax function
10:00

In this video I quickly cover some of the gotchas that I found when using the minmax function.

Minmax function gotchas
07:05

In this video I quickly cover what the special min-content and max-content values do when using them for sizing our grid tracks.

Understanding max-content and min-content
05:16

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.

The fit-content function
05:49

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.

The repeat function
06:12

In this video we look at Grid Gaps, and how we can set up different gap sizes between both column and row tracks.

Managing Grid Gaps
05:43

I quickly explain the changes to grid-column-gap, grid-row-gap and grid-gap.

Grid Gap Updates!!!
00:28

In this video I quickly show you how you can nest a grid container inside of a grid item of another grid container.

Nested grids
01:16

Just a quick note on nesting and how grid items can also be grid containers.

A note on nesting
00:25
+ Controlling Grid Items
16 lectures 01:50:45

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.

Reordering Grid Items
07:00

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.

Preview 07:55

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.

Moving Grid Items to different rows
07:06

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..

Moving Grid Items to non adjacent cells
09:05

In this video we look at how we can make grid items span over multiple column tracks, row tracks, or both.

Grid Item spanning basics
09:58

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.

The span keyword
07:58

In this video, we quickly cover the gotchas that I noticed when spanning grid items inside of a grid container.

Grid Item spanning gotchas
04:07

In this video we cover how to name grid lines and how to use these line names to place our grid items.

Naming Grid Lines
05:49

In this video we cover how to use line names to assist with spanning grid items.

Spanning Grid Items based on line names
07:19

In this video we cover how to give multiple line names to the same grid line.

Using multiple line names
04:58

In this video we cover how we can use line names in conjunction with the repeat function.

Lines names and the repeat function
04:04

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.

The grid-column property
08:02

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.

The grid-row property
05:18

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.

Preview 10:48

In this video we look at how the grid-area is used to span grid items over both column and row tracks.

Spanning Grid Items using the grid-area property
06:25

In this video, we update our knowledge on the grid property, by learning how to specify line names when using it.

The grid property reviewed
04:53
+ Controlling Alignment
9 lectures 29:35

In this video we cover how to change the alignment / distribution, of all our row tracks in our grid container.

Aligning Row Tracks
06:08

In this video we cover how to change the alignment / distribution, of all our column tracks in our grid container.

Aligning Column Tracks
02:29

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.

The place-content property
04:56

In this video we look at how to vertically align the content inside of all our grid items of a grid container.

Vertically Aligning Grid Items
03:29

In this video we look at how to horizontally align the content inside of all our grid items of a grid container.

Horizontally Aligning Grid Items
02:28

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.

The place-items property
03:41

In this video we look at how to vertically align the content inside of an individual grid item.

Vertically Aligning an Individual Grid Item
02:05

In this video we look at how to horizontally align the content inside of an individual grid item.

Horizontally Aligning an Individual Grid Item
01:37

In this video we look at how to both vertically and horizontally align the content inside of an individual grid item.

The place-self property
02:42
+ Responsive Grids
8 lectures 53:08

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.

Preview 11:52

In this video, we quickly cover how we can prepare our HTML files so that on mobile it will display appropriately.

Setting viewport for mobile and tablet devices
03:27

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.

Preview 08:41

In this video, we now cover how to span grid items using areas.

Spanning Grid Items using areas
08:03

In this video we cover how to mask a specific grid cell in our grid container as empty using areas.

Defining empty grid cells
01:38

In this video we cover some of the gotchas that you have to look out for when using grid-template-areas property.

Gotchas with grid-template-areas
02:18

In this video we learn another clever way of making a responsive grid, by just using the repeat function.

Building responsive grids without media queries
09:07

In this video we once again review the grid property, taking the concepts covered in this section and applying it to this property.

The grid property reviewed again
08:02
+ Implicit Grids and Autoplacement
17 lectures 02:23:02

In this video we get a clearer understand of the difference between what is deemed an explicit grid, and what is implicit.

Implicit vs explicit grids
06:01

In this video I quick introduce the Autoplacement Algorithm and define all the criteria that makes it up.

An introduction to the Autoplacement Algorithm
02:47

In this video I quickly cover what Flow means in regards to the Autoplacement algorithm and the options you have available.

Understanding Flow
07:13

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.

Controlling Flow
07:50

In this video we go over the algorithm used to determine the order to which grid items are placed inside our grid containers.

Understanding order-modified document order
04:27

In this video we talk about the concept of locking and how it affects how grid items are placed within our grid containers.

Understanding locking
12:21

In this video we extend our knowledge from the previous video and look at locking from a practical level.

Preview 12:31

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.

Locking and responsive web design
09:51

In this video I go through some practical examples of how locking works when using the grid-template-areas and grid-area properties.

Locking and responsive web design in action
07:16

In this video I explain Grid Spans and how it affects the placement of grid items

Understanding Grid Spans
04:29

In this video we look at some practical examples of how grid spanning works.

Grid Spans in action
08:10

In this video I quickly explain what sparse and dense packing is and how it affects how items are placed inside a grid container.

Understanding packing
05:51

In this video we look at how to change the packing using the grid-auto-flow property.

Packing in action
03:36

In this video we put all the knowledge over the last few videos to get a better understanding of the Autoplacement Algorithm

Preview 14:47

In this video we continue looking at examples to better understand the Autoplacement Algorithm

Bringing it all together part 2
14:59

In this video we take all the learning we have gathered in this section and apply them to the grid property.

The grid property and Autoplacement part 1
10:44

In this video we look at a few gotchas that you might run into when setting certain Autoplacement values on the grid property.

The grid property and Autoplacement part 2
10:09
+ CSS Grid Extras
8 lectures 01:08:07

In this video I quickly show you the grid-template property and why you should not use it anymore.

The grid-template property
06:50

In this video we compare how absolute positioning works in a grid container vs a regular block level element.

Absolute positioning
05:55

In this video, I give you a current snapshot of the animations that are supported with CSS Grid.

Animating grids
05:10

In this video we take a look at some layouts that are built using Flexbox and convert them to use CSS Grid instead.

Simplifying Flexbox layouts with CSS Grid
11:32

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.

More simplifying Flexbox layouts
11:44

In this video I show you when it's the right situation to use Flexbox over CSS Grid.

When to use Flexbox over CSS Grid
13:13

Just a quick note grid items and how they can be sized.

A note of grid item sizing vs flex item sizing
00:24

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.

Preview 13:19
+ Some Simple Layouts
6 lectures 32:29

In this video I show you a couple of ways of setting up a 4 column layout using CSS Grid.

Building a 4 column layout
04:15

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.

Building a sidebar
03:43

In this video we look at a couple of ways of controlling the vertical alignment of text using CSS Grid.

Vertically aligning text
03:04

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.

Centering a modal dialog
04:39

In this video we look at how we can implement a sticky footer easily using CSS Grid.

Creating a sticky footer
04:31

In this video we look at how to format a typical form, and align both labels and their associated controls.

Basic form formatting
12:17
+ Some Advanced Layouts
11 lectures 01:56:05

In this video we look at how to build out a common layout, known as the Holygrail layout.

Preview 11:43

In this video we look at how to build a comment layout used on social media sites. The Media Objects layout.

The Media Objects layout
09:19

In this video we look at how to build a nice viewport friendly movie gallery using CSS grid and the viewport units.

A Viewport Friendly Image Gallery
06:27

In this video we look at once again how to build a viewport friendly movie gallery, but this time using the auto-fit keyword.

Another Viewport Friendly Image Gallery
05:31

In this video we look at how to animate a sidebar / drawer that is set up using CSS Grid.

Animating a Sidebar
05:51

In this video we build as the title suggests. A monthly calendar.

A Monthly Calendar
12:14

In this video we look at how we can using CSS Grid to organise and prioritise articles on a newspaper cover.

A Newspaper Cover
13:06

In this video we look at how we can build the Twitter layout, that supports both mobile and other larger devices.

A Twitter Responsive Layout
20:34

In this video we build the main layout of a movie gallery for mobile in portrait mode.

A Responsive Movie Gallery
12:03

In this video we add the rest of the movies and deal with the scrolling, and then we quickly fix up the app for landscape mode on mobile and portrait mode on tablet (iPad).

A Responsive Movie Gallery Continued
10:23

In this video we finish off the movie gallery by reconfiguring the gallery grid for landscape mode on table (iPad).

A Responsive Movie Gallery Finale
08:54
+ Application 1 - A Chat application UI
13 lectures 01:23:13

In this video I quickly cover the chat application we are building, and the starting state of the application.

Preview 02:03

In this video we'll set up the basic shell as a grid and organise each section of our chat application

Preview 15:50

In this video we are just going to focus on building the chat search component in the top left section of our chat application

Building the search conversation section
04:30

In this video we are just going to focus on the add conversation button at the bottom left hand corner of our chat application

Building the add conversation section
05:31

In this video we are going to focus on the title section in the top right that shows the user we are talking to, and a bin logo to indicate that this conversation can be deleted

Building the chat title section
05:28

In this video we are going to build out a non functional form at the bottom right of our application. This will include an attachment icon.

Building the chat form section
06:43

In this video we are going to design a single conversation in the conversation list, and then style it so it the content inside of it is organised in a grid.

Building an individual conversation item
11:01

In this video we are for the most part going to concern ourselves with some overflow problems with both the title and latest message of our conversation.

Fixing conversation item sizing issues
05:50

In this video we are going to quickly add the rest of the conversation items and deal with scrolling.

Adding more conversation items
03:04

In this video we are going to start creating our initial chat messages, ignoring sizing and alignment issues for the moment.

Creating some initial chat messages
08:14

In this video we are going to tackle some sizing and alignment problems with our speech bubbles

Sizing and aligning chat messages
06:14

In this video we are going to add a profile picture to the chat message when it's the other person talking

Adding chat profile pictures
07:22

In this video we are just going to add the remaining chat messages to our chat message list, and also fix the scrolling. This will finish off our first application in this course.

Adding the finishing touches
01:23
Requirements
  • Some knowledge of CSS and HTML
  • Flexbox is optional but preferred
Description

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:-

  1. All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.

  2. 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.

  3. The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.

  4. Grid areas and how it helps simplify responsive web design

  5. The concept of implicit and explicit grids and what the differences are

  6. A deep look into the Autoplacement algorithm

  7. Animation at a high level and what works currently with CSS Grid

  8. How to convert some layouts in Flexbox to use CSS Grid instead

  9. 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:-

  1. Column based layout

  2. Basic Sidebar layout

  3. Vertical Text alignment

  4. Modal alignment

  5. Stick footer layout

  6. Formatting form fields

And hopefully in future much more. We then look at some advance layout topics such as:-

  1. The Holygrail layout

  2. The Media Objects layout

  3. A Viewport Friendly Image Gallery

  4. A Responsive Image Gallery

  5. An Animated Sidebar

  6. A Monthly Calendar layout

  7. A Newspaper Cover layout

  8. A Responsive Twitter Clone Layout

  9. 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:-

  1. A Chat UI interface

  2. An Uber Eats Clone Responsive Application

  3. A YouTube Clone Responsive Application

Who this course is for:
  • Web Developers
  • Web Designers
  • User Experience Designers
  • Front End Developers
  • Full Stack Developers