CSS Grid Layout

If you have heard about CSS Flexbox, you know that a flexbox aligns the elements in the container in one direction. It is a powerful model that distributes space among the items. It is one-dimensional which means it deals with the layout in one direction only, either as a row or as a column.

Why to CSS Grid Layout?

CSS Grid layout is a 2-dimensional system which means it can handle both the rows and columns. Flexbox can be used for small and simple one-dimensional layouts but with a grid, we can align items in rows and columns. With grid layout, we can divide the page into major regions and define relationships between them in terms of size, position and layer.

How to use Grid Layout?

First, create a grid-container by setting the display property to grid or inline-grid. All direct children of the container will become grid items now.

The vertical lines of grid-items are called columns and the horizontal lines are called rows. The lines between columns are called column lines and the lines between rows are called row lines.

Grid with 6 items.

Some properties of the grid container :

• grid-template-columns: It defines the number of columns in the layout and also the width of each column.

• grid-template-rows: It sets the height of the rows in the container.

• justify-content: It aligns all the items inside the grid-container.

• align-content: It vertically aligns the grid inside the container.

Child elements of a grid-container become grid items. By default, an item is placed in one column in a row but we can put the items so that they can take up extra space in the grid. Some properties of grid-items are:

• grid-column: It defines the columns where an item can be placed.

• grid-row: It defines on which rows can an item be placed.

• grid-area: It can be used as a shorthand for grid-row and grid-column. It can also be used to assign names to grid areas.
• order: It allows us to position our items regardless of their position in the HTML document.

Grid offers a powerful layout model to place our items in the different parts of a grid container. It is used for big complex applications that a require good layout. If you would like to learn more, you can click here. Keep learning!