CSS Grid: The Complete Guide
- 6 hours on-demand video
- 7 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Learn about the structure of the CSS Grid and how to practically use it (columns, rows, gaps, minmax function, repeat function, explicit, implicit, auto-rows, auto-columns, auto-flow, fraction units, name lines, auto-fill, auto-fit, template areas, grid alignment, shorthand properties)
- CSS Basics, HTML Basics
What's this course about?
In this course you will learn how to create and use CSS Grids. We will cover all the main features and properties, learn how to align columns, rows and grid items inside a grid container and practice the usage of the CSS Grid in seven small projects.
More details please!
CSS Grid is a major latest addition to the CSS spec. In this course I will teach you about what is CSS Grid, how to create it, customise and build small projects with it. At the end of the course you will have a solid understanding of the CSS Grid, what it is capable of and how to use it in your own projects.
We will start from scratch. First we will dive into Grid Basics and its main properties: what it is, what elements it is comprised of, how to create different kinds of grid, use multiple CSS functions and distance values with it, explore implicit with explicit grids and how to construct grid in a more visual ways.
Then we will explore the grid alignment properties. You will learn what alignment properties can be used inside a grid container. We will go through each property and its values individually, look at what they can do and how they affect a grid and its items.
Finally, we will create seven projects using the CSS Grid in conjunction with other CSS properties, so that you would be able to practice your skills in creating CSS Grids.
If you still haven't yet touched a topic of CSS Grid, then it is probably a high time to change this. Let’s get started!
What should you know to take the course?
CSS basics, HTML basics
What is CSS Grid
Grid track: Column
Grid track: Row
Grid FR (fraction unit)
Grid repeat function
Grid column start/end, shorthand property
Grid row start/end, shorthand property
Grid minmax function
Grid name lines
Grid auto-fill/auto-fit and the difference between two
Grid auto rows
Grid auto columns
Grid explicit vs implicit
Grid auto flow
Grid template areas
Inline grid and grid shorthand property
Grid areas alignment
Grid practice projects:
Places list with images and description
App UI with tiles
Who is teaching you?
My name is Sergey Shtyrlov. I'm a frontend developer. I've been working in this sphere for almost 7 years and continue doing it today. I've published several course here on Udemy and people seem to like them. I hope this course will help you to master the CSS Grid as well!
- You want to learn CSS Grid
- You want to learn modern CSS techniques
- You want to improve your knowledge of CSS