CSS Grid Layout
Learn CSS Grid Layout in 3 minutes
What is CSS Grid
CSS grid is layout is a brand new module introduced that brings a two-dimensional grid system to css. think of it as designing a table but here you will be able to control almost all part of the table, be it your spacing between the cells, rows , border etc,
If this all sounds scary to you, just stick a little longer and I will make sure that you have complete visualization of grid system. But first lets go over all the terminologies of grid system one by one
Axis in CSS Grid
There are two axis to the grid system , column axis and row axis. If you are coming from the flex-box (which you should definitely checkout) then you might be wondering do these also change based on the orientation and the answer to that is NO ! ( because orientation won't really make a lot of difference here)
Grid Lines
Grid Lines can be simply understood by imagining lines that separate the column and rows. Important part here is that the grid lines for rows/columns are always numbered and are always one more than number of rows/columns (i.e, 1 to row/column+1)
Gutters
Gutters are the space between the two adjacent rows and columns. and the one point to note here is that these space could be different from one another.
Grid Track
Grid Track is essentially a way to define what is row and column in css grid, and this is formally defined as the space between two adjacent grid lines. Row : the space between two adjacent row grid lines is a row/ Grid Track row Column : The space between two adjacent column grid lines is a column/ Grid Track column
Grid Area & Grid cell
Grid Area is the space between two horizontal / vertical Grid Lines and if the these grid lines are adjacent to each other then the space enclosed is called as Grid cell (an singleton element of Grid)
Conclusion
This article gives you a brief overview of the properties associated with the new grid system introduced by css. Well in my opinion grid system is a great way to design your 2D layout and this almost eliminates the need for use of external framworks like Bootstrap.