From the course: CSS Essential Training
Unlock this course with a free trial
Join today to access over 25,300 courses taught by industry experts.
Introduction to CSS Grid
From the course: CSS Essential Training
Introduction to CSS Grid
- The Flexbox and grid layout modules share similar syntax and some of the same properties, but each has its own specialties. Flexbox is a one-dimensional layout because it only aligns items on a single axis. When you use Flexbox with flex-wrap, it may look like you're creating rows and columns, but you're still working with a single axis layout. Grid, on the other hand, is a two-dimensional layout because you can arrange items into both rows and columns at the same time. These differences don't mean that one is better than the other. Grid and Flexbox have introduced new and flexible solutions from many different use cases. Let's go over the terminology for CSS grid. A grid consists of evenly based columns. Gutters are the spaces between the columns used to provide consistent spacing between design components. Grid-based layouts are a common part of web design, even before CSS grid existed. The grid serves as a guide for…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Introduction to CSS Grid2m 49s
-
(Locked)
The explicit grid3m 35s
-
(Locked)
The implicit grid2m 16s
-
(Locked)
The gap property54s
-
(Locked)
Positioning with grid lines3m 31s
-
(Locked)
Project: Grid layout4m 36s
-
(Locked)
Project: Grid line positioning7m 25s
-
(Locked)
Project: Grid and dev tools2m 44s
-
(Locked)
-
-
-
-