Let’s take a quick look at the most exciting thing to come to front end web layout in a long time. That is the technology called CSS Grid.
The Problem & Solution:
Problem: Current tools for web layout are content-out and one dimensional.
Solution: Two-dimensional layout-in tool to separate content from presentation.
Introduction to CSS Grid:
CSS Grid is the most exciting new way to create amazing layouts on the web. It’s not a framework or library, it’s just an addition to the CSS language that allows us to quickly create flexible, two dimensional layouts. With the introduction of CSS Grid, we now have an independent layout mechanism which has a lot of cool benefits. Now we can write more resilient code without the help of any hacky tricks. In simple words, we can now do a lot many things with fewer lines of code.
Rather than having to deal with tables, flex boxes, floats and positioning – we now have this amazing, two dimensional layout mechanism, which allows us to control all aspects of our rows and columns, at the same time. Grid is one of the most powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build using plain CSS.
The grid also gives us a flexible way to change the position of elements completely through CSS, without changing a single line in the HTML code. This can be used with media queries to alter the layout at different breakpoints.
CSS Grid Definition:
CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create two-dimensional complex responsive web design layouts more easily and consistently across browsers.
CSS Grid Terminology:
Grid container: Element containing a grid, defined by setting “display: grid;”. The first step to setting up your grid is to define your grid container. A grid container, houses and establishes and your grid. The container sets the grid formatting context and manages how its direct child elements are spaced, sized and aligned.
Grid item: Element that is a direct descendant of the grid container. Any element inside a grid container is considered a grid item.
Grid line: Horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid.
Grid cell: The intersection between a grid row and a grid column. Just the same as in an html table cell.
Grid track: The space between two or more adjacent grid lines. Row tracks are horizontal and column tracks are vertical.
Grid area: Rectangular area between four specified grid lines. Grid areas can cover one or even more cells.
Grid gap: A grid gap is an empty space between grid tracks (normally called as gutters).
Browser Support:
As of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera mini and UC browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.
Example
I have created a fiddle to showcase the CSS Grid capabilities in a nutshell. You can play around with it and learn more about the possibilities.
Further Reading
A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout – CSS: Cascading Style Sheets | MDN
Building Production-Ready CSS Grid Layouts Today
CSS Grid Layout – W3Schools
