CSS grid layout
 | This article may be written in a style that is too abstract to be readily understandable by general audiences. (October 2017) |
| CSS Grid Layout Module Level 1 | |
 A depiction of a typical webpage layout using CSS floats. | |
| Abbreviation | Grid, grid layout |
|---|---|
| Native name | CSS Grid Layout Module Level 1 |
| Status | W3C Candidate Recommendation Draft |
| First published | April 7, 2007[1] |
| Latest version | Level 1 December 18, 2020[2] |
| Preview version | Level 2 March 11, 2021[3] |
| Organization | W3C |
| Committee | CSS Working Group |
| Editors | |
| Base standards | CSS |
| Domain | CSS |
| Website | www |
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design layouts more easily and consistently across browsers.[6] 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 (it is a W3C Candidate Recommendation) although it has been adopted by most major browsers.[2]
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.[7]
One issue with exploiting floats in CSS is that if the 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.[7] 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.[8][9][10] 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 brave Browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed. [11]
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.[12]
the fr unit
The "fr" unit is often used with CSS grid layout.[13][14][15] The "fr" unit, part of the CSS grid layout specification, represents a fraction of the leftover space in the grid container.[16]
Examples
"Holy grail" layout
The following is an example of the "holy grail" layout:
| HTML | Output |
|---|---|
<html>
<style>
div { border: 1px solid; }
body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-areas:
"header header header"
"left middle right"
"footer footer footer";
}
</style>
<body>
<div style="grid-area: header">The header</div>
<div style="grid-area: footer">The footer</div>
<div style="grid-area: left">The left panel</div>
<div style="grid-area: middle; height: 200px">The main content area</div>
<div style="grid-area: right">The right panel</div>
</body>
</html>
|
|
Table of values
The following is an example of a table of values:
| HTML | Output |
|---|---|
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
div {
border: 1px solid;
}
</style>
<body>
<div class="wrapper">
<h3>Header1</h3><h3>Header2</h3><h3>Header3</h3>
<div>value11</div><div>value12</div><div>value13</div>
<div>value21</div><div>value22</div><div>value23</div>
<div>value31</div><div>value32</div><div>value33</div>
<div>value41</div><div>value42</div><div>value43</div>
<div>value51</div><div>value52</div><div>value53</div>
<div>value61</div><div>value62</div><div>value63</div>
<div>value71</div><div>value72</div><div>value73</div>
</div>
</body>
</html>
|
|
References
- ^ "CSS Grid Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
- ^ a b Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (2021-12-18). "CSS Grid Layout Module Level 1". W3C. W3C Working Group. Retrieved 2021-04-09.
- ^ a b Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (2021-03-11). "CSS Grid Layout Module Level 2". W3C. CSS Working Group. Retrieved 2021-04-09.
- ^ Mogilevsky, Alex; Cupp, Phil; Mielke, Markus; Glazman, Daniel, eds. (2011-04-07). "Grid Layout". W3C. CSS Working Group. Retrieved 2021-04-09.
- ^ Mogilevsky, Alex; Mielke, Markus, eds. (2007-09-05). "CSS Grid Positioning Module Level 3". W3C. CSS Working Group. Retrieved 2021-04-09.
- ^ "CSS Grid – Table layout is back. Be there and be square". Google. Retrieved 6 October 2017.
- ^ a b Cite error: The named reference
:0was invoked but never defined (see the help page). - ^ Anderson, Kareem (13 September 2017). "Microsoft's newest browser gets a significant boost with EdgeHTML 16". Retrieved 7 October 2017.
- ^ Protalinski, Emil (9 March 2017). "Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat". VentureBeat. Retrieved 7 October 2017.
- ^ "CSS Grid Layout". Can I Use. Retrieved 7 October 2017.
- ^ Ates, Faruk. "Modernizr 3.5.0".
- ^ "Flexbox grids and frameworks".
- ^ "CSS Grid Layout: The Fr Unit".
- ^ "Fractional.".
- ^ "An Introduction to the `fr` CSS unit"
- ^ "Flexible Lengths: the 'fr' unit"