From the course: CSS Layouts: From Float to Flexbox and Grid

Grid, grid systems, and CSS Grid - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Grid, grid systems, and CSS Grid

- [Instructor] Before we dive into the CSS grid layout, Let's go over some potentially confusing terms. grid, grid system, and CSS grid. A grid is basically a pattern, used by graphic and web designers to line up design elements to help create a consistent flow and symmetrical layouts. Grids are broken down into equal width and evenly spaced columns. Sometimes, rows are added as a guide, to line up components horizontally as well. Gutters, the space between the rows or columns, are usually added to allow for consistent spacing between columns. Page components are then arranged within the columns and can span across one or more columns. There are different ways to define a grid, but a common layout for webpages is to use a 12 equal column grid. 12 is easily divisible by two, three, four, and six, which makes it easier to create consistent responsive designs. Grid based layouts have been common in print and web design, before the CSS grid layout module was introduced. When translating these designs into webpages, one technique is to layout each page component block by block, and sizing them accordingly. Similar to what we've been doing with our previous layout exercises. While there's nothing wrong with this approach, creating a CSS grid system, started becoming popular, especially for more complex layouts. In a grid system, columns and gutters are recreated with CSS A bunch of pre-designed CSS rule sets are defined and tied to grid specific class names. Those class names are used to layout the page components. For example, if I wanted to create a component that spanned across four columns, and a second one that spanned across eight columns, I would use a class called cal-4 and cal-8. Or something similar. As the concept of CSS grid systems grew in popularity, many third-party solutions popped up. Some offered a basic CSS grid template, while others created full-scale frameworks. One of the most popular frameworks is Bootstrap. Though this framework includes pre-written components, such as badges, buttons, cards, and more the framework itself is built on a grid system. Even before CSS grid was introduced, There were some pros and cons to consider when using third-party frameworks, such as code bloat or restrictions and customizations. But now that CSS grid is available, it has become a lot easier to create rows and columns ourselves. We won't be covering frameworks in this course, but if you plan to use one, I would recommend doing some research on the pros and cons of CSS frameworks, and checking to see if it's been updated to the latest CSS layout techniques.

Contents