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

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…

Contents