CSS Grid System

The grid system defines a certain grid, these help us to distribute the different elements which a web page contains in a more organized method.

To start with a grid, it would be necessary to have previous flexbox configurations. Next we go to define a series of concepts:

• Container: is the mother element that defines the grid
• Item: each of the children that contains the grid.
• Cell: each unit of the grid.
• Area: set of cells.
• Columns: vertical bands of the grid.
• Rows: horizontal bands.
• Line: horizontal or vertical separator of the lines.

To activate the grid we use the display property and the grid value, which establishes a grid with items in blocks.

How to define the size of the cells

To indicate the dimensions of each cell we have to use the CSS properties grid-template-columns and grid-template-rows.

This css will contain two columns of 50px and 300px, and two rows of 200px and 75px. In this example we have a total of four items.

We can also use the defined fraction unit fr that equals a fraction of the free space.

This new example creates a 2x2 grid, where the grid’s width size is divided into two columns (same width size for each), and the grid’s height size is divided into two rows, where the first will occupy double (2 fr) that the second (1 fr):

Grid by areas

The grid-template-areas allows us to define each area of ​​the grid of the grid. Once named, we can refer to them, and in this way position the elements.

Next we will see an example.

We have divided the space into two columns and three rows, so we would have 6 cells, with 4 items to distribute. First assigning a grid-area to each item, and you have to define each cell with the grid-area that we have created.

The item — header, the head (head), would occupy the whole top part.

The item — main, the menu (menu), would occupy the left area of ​​the grid, below the header.

The item — aside, the content (main), would occupy the right area of ​​the grid, below the header.

The item — footer, the grid foot (foot), would occupy the entire lower area of ​​the grid.

CSS grid system allows programmers to organize the webpage more easily and quickly. Once you master this program, you will be prepared to design better organized and more attractive web pages in your programming career.