CSS Grid and Terminologies used
CSS Grid is CSS layout system which is gaining popularity among the CSS developers community and it helped take CSS to another level by introducing two dimensional layout systems. CSS Grid have changed the way CSS is written including how HTML is marked up. Using CSS grid, we can now design more complex layouts which was difficult to achieve in vanilla CSS before.
CSS grid works perfectly with Flex box which is also another popular layout system in CSS. Flex box is good at handling one dimensional layout while CSS Grid can help in coming out with complex two dimensional layout designs.
Previous to CSS grid a number of CSS frameworks such as bootstrap existed to help solve CSS weaknesses to layout complex designs by coming up with their own grid systems. The advance of CSS Grid however made CSS so powerful that there is no more the need to depend on frameworks to come up with complex and beautiful layouts.
— Terminologies used in CSS Grid
CSS Grid system works similar to Flex box but is more complex. The container containing the the grid is called Grid Container and all the direct children of the container are called grid items. To create a new grid container all we have to do is to set the display property of an element to grid. There are two axis in Grid, the y axis also called Column Axis while the x axis called Row Axis. The axis are always the same and can not be changed.
The vertical and horizontal lines that dived up the items are called the Grid Line and they are automatically numbered both in the Column Axis and Row Axis starting from one all the way to the number of rows or columns. These number are used to specify the grid items in which a content can span over the axis. The actual space between the item is called the Gutter.
The space containing all the row items is called Grid track/row and the space containing items span in column axis is called Grid track/column.
Hopefully this blog was helpful to introduce you to CSS Grid and have some understanding on the terminologies used. In coming series of blogs I will try to elaborate more on how to use CSS Grid to actually layout your content.
