CSS grid layout


CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. There have been other methods for controlling web page layout methods, such as tables, the box model, and CSS flex box. CSS grid is currently not an official standard although it has been adopted by most major browsers.

Motivation

CSS grid can create more asymmetrical layouts than the previous grid and layout options like CSS floats. 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 exploiting floats in CSS is that 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 CSS flex box 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.

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.

Utilization in frameworks

There are no current web frameworks that incorporate CSS grid in contrast with CSS flex box which is used in frameworks such as Bootstrap 4 and Foundation 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 holy grail layout:




The header

The footer

The left panel

The main content area

The right panel




Here is an example of a table of values:





Header1

Header2

Header3

value11
value12
value13

value21
value22
value23

value31
value32
value33

value41
value42
value43

value51
value52
value53

value61
value62
value63

value71
value72
value73