From the course: CSS: Combining Grid and Flexbox

What is Grid? - CSS Tutorial

From the course: CSS: Combining Grid and Flexbox

Start my 1-month free trial

What is Grid?

“

- [Instructor] Whether it's crisscrossing streets of a city or the layout of a newspaper, grids bring order and organization. They also allow designers to group elements in a website layout. If you've ever worked in print design, you know where the idea of grid layouts originated from. A grid is a precise measurement tool used to position design elements on a page. This idea is often used on the web to make content organized and uniform allowing for an improved viewing experience for your users. CSS Grid is revolutionizing the front end design industry. It is fast becoming an internet standard. CSS Grid is a newer CSS technology that is really designed for creating grid-based layouts. This system allows designers and developers to place items, HTML elements, in a grid-based layout using columns and rows. It may sound like a table-based system, but there's much more in CSS Grid than designing in a table. CSS Grid allows you to lay out the elements of your design independently from their document source order, positioning elements precisely and giving you a slew of ways in which to control the layout all in a responsive way. CSS Grid is a very powerful system that allows you to create complex two-dimensional layouts. It was designed to tackle grid-based user interfaces that we are all about using on the web. So how is Grid different from Flexbox? Flexbox is for one-dimensional layouts. You can use it to place elements in just a row or just a column. With Grid, we can create two-dimensional layouts that allow us to use rows and columns at the same time, Flexbox works from the content out and one dimensionally. We apply a layout to an individual item, and then we have to relate that item to other things, while Grid on the other hand is the opposite. It works from a two-dimensional layout in perspective. In Grid, we are defining a container and putting our layout into it. It works from a layout in perspective. Flexbox does its grid thing on the child elements, but with Grid, we do the creation on the parent. Grid allows us to layer items to occupy the same space. It also allows us to fully control negative space in our designs. We use Flexbox in row or in columns. We use Flexbox if we want to distribute space. The basic concept of CSS Grid is you take an HTML element and you divided into rows and columns turning it into a grid. Then you place the direct children of this element anywhere on the grid. Grid items have to be direct children of the main grid container. These are the elements available to put on the grid. So let's take a little time and quickly go through some of the Grid terminologies and features and review how we can utilize Grid in our webpages.

Contents