CSS Grid and more

Grid container – the element containing a grid, defined by setting

  • display: grid;

Grid item – the element that is a direct descendant of the grid container

Grid line – the horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by a number, starting and ending with the outer edges of the grid container. They are referenced by number, starting and ending with the other borders of the grid and can also be named for easier reference.

Grid cell – the intersection between a grid row and a grid column — effectively, the same as a table cell

Grid track – the space between two or more adjacent grid lines grid lines have no width by default, meaning each grid track is jammed up against the next one

Grid area – rectangular area between four specified grid lines and can cover one or more cells and the purpose of a grid area is to define an area within the grid that can be referred to when grid items are placed.

CCSis a two dimensional layout that tool that allows everyone to approach what is displayed in the browser view port as a whole. Using the grid system, it allows to have a new approach to web layouts and web design. The use of the grids is to establish tracks in the form of columns and rows placing contents within the tracks which leads you to think carefully on where to set your contents.

Leave a comment