Grids are fundamental in designing any layout. CSS Grid Layout is the most powerful layout system available in CSS till today. CSS Grid - Grid Layout Working Draft was published back in April 2011 but it is recently integrated (March ‘017) in all the modern browsers.
Previously we used tables, floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (like vertical centering). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together but are not the same).
CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web unlike Flexbox which is largely a one-dimensional system.
How is this different from Flexbox?
- Flexbox is for one dimensional layout. If we have to place any elements into just a row or a column but, Grid is useful for two dimensional layout. If we have to use row or columns at the same time.
- Flexbox works from the content out but Grid works from content in. In grid we are defining a container and putting layout into it.
- Flexbox does its grid making on the child elements, but we do grid creation on the parent eg:
4. Grid allows us to layer items to occupy the same space.
5. Grid allows us fully control negative space in the design.
6. We use Flexbox in row OR the column.
7. We use Flexbox if we want to distribute space.
Basic Terminology:
The Grid specification introduces us some terminologies that we need to understand so we can utilise the grid to its full effectiveness.
Grid Container:
The element on which display: grid is applied. It's the direct parent of all the grid items.
<div class="container"> <div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div> </div>
Grid Item:
The children (e.g. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn't.
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>Grid Lines:
Grid lines are the horizontal and vertical lines that form the basis of the grid structure. They are used to position items on the grid.
The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.
Grid Track:
A grid track is the space between 2 adjacent grid lines. They are the rows and columns of your grid. The diagram below highlights the grid track between the first and second row grid lines. We can separate grid tracks with gutters, using the grid-row-gap and grid-column-gap properties.
Grid Cell:
A grid cell is the space between 2 adjacent row grid lines and 2 adjacent column grid lines. It’s conceptually similar to a table cell, as it is the single unit of your grid.
Grid Area:
The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.
Grid Properties:
The grid can be manipulated with the properties listed in the upper list. Grid was created to be very flexible and provide solutions for many different use cases, we cant master it within a day but, we’ll be able to spend more time on designing layouts instead of struggling with the code to produce layout we want.
Finally, grid helps us designers and developers to simplify the code needed to create layouts on the Web that was previously impossible, or required a lot of extra code to achieve.
Happy coding !!
Reference Links:
