CSS grid layout

CSS grid layout or CSS grid is a technique in that allows web developers to create complex  layouts more easily and consistently across browsers. There have been other webpage layout methods used previously including, the , and. It is currently a despite already being adopted by most major browsers.

Motivation
CSS grid can create more asymmetrical layouts than the previous grid and layout options like. It also allows for more standardized code that works across browsers. This is in contrast to relying on specific browser hacks or complicated workarounds.

One issue with using floats in CSS is if content gets added to one portion of the page it could disrupt the flow of the page and break the layout. This is due to the varying heights for layout elements. Though supports flexible layouts and provides the flexibility of creating complex layouts, it fails when the need for creating responsive layouts in 2-dimensional space arises. That is where CSS grid layout shines.

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 3.5.0 to detect and gracefully degrade the webpage as needed.

Utilization in frameworks
There are no current web frameworks that incorporate CSS grid in contrast with which is used in frameworks such as  4 and  6.

the fr unit
The "fr" unit is often used with CSS grid layout. The "fr" unit, part of the CSS grid layout specification, represents a fraction of the leftover space in the grid container.

Examples
Here is an example of the :

Here is an example of a table of values: