CSS Grid Layout

CSS Grid Layout (Grid) is defined as a two-dimensional layout system that was designed to completely change the way we design grid-based user interfaces. Grid is the very first CSS module! Basically, Grid is a grid-based layout system, with rows and columns, making web page design easier than traditional ways.

Terminology for Grid can get a bit confusing at first but after working with it a few times you can pick it up pretty quickly.

Below is some basic terminology for Grid:

Grid Container:
The Grid container is an element on which display: grid is applied. The Grid Container is the parent of Grid Items.

Grid Item:
Grid Items are children of the grid container.

Grid Line:
Grid Lines are separating lines that make up the structure of the Grid. Grid Lines can be vertical or horizontal. Vertical lines are called “column grid lines”, and horizontal lines are called “row grid lines”.

Grid Cell:
A Grid Cell is the space between four intersecting grid lines and conceptually much like a table cell.

Grid Track:
A Grid track is a space between two adjacent grid lines. You can think of them as the columns or rows of the Grid.

Grid Area:
The Grid Area is the space created/surrounded by four grid lines. A grid area may be composed of any number of grid cells.

The difference from Flexbox:
As you may remember in the beginning of this blog post I had mentioned that Grid was designed for a two-dimensional layout - rows, and columns at the same time. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Flexbox and Grid share some common features but each have different use cases.

All of these terms together make up a high level overview of the CSS Grid Layout! I hope you learned a little, I’d recommend doing a small project using Grid in order to get a full grasp of how powerful it is. Thanks for stopping by!