 | This article may be written in a style that istoo abstract to be readily understandable bygeneral audiences. Pleaseimprove it by using words and phrases that have precise, specific meanings within a particular field, as well as by adding examples.(October 2017) |
| CSS Grid | |
|---|---|
| CSS Grid Layout Module Level 1 | |
 A depiction of a typical webpage layout usingCSS floats. | |
| Abbreviation | Grid, grid layout |
| Native name | CSS Grid Layout Module Level 1 |
| Status | W3C Candidate Recommendation Draft |
| First published | April 7, 2007 (2007-04-07)[1] |
| Latest version | Level 1 December 18, 2020 (2020-12-18)[2] |
| Preview version | Level 2 March 14, 2023 (2023-03-14)[3] |
| Organization | W3C |
| Committee | CSS Working Group |
| Editors | [3] |
| Base standards | CSS |
| Domain | CSS |
| Website | www |
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
InCascading Style Sheets,CSS grid layout orCSS grid creates complexresponsive web designgrid layouts more easily and consistently across browsers.[6] Historically, there have been other methods for controlling web page layout methods, such astables,floats, and more recently,CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard (it is aW3C Candidate Recommendation) although it has been adopted by the recent versions of all current major browsers.[7]
CSS grid can create more robust and flexible layouts than the previous options likeCSS 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.[2]
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.[2] Though flexbox 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.
The first comprehensive draft of a grid layout for CSS was created byPhil Cupp,Markus Mielke andAlex Mogilevsky atMicrosoft in 2011 and implemented inInternet Explorer 10 behind a-ms-vendor prefix. The syntax was restructured and further refined through several iterations in theCSS Working Group, led primarily byElika Etemad andTab Atkins Jr. The feature was widely adopted byweb developers afterevangelism led primarily byRachel Andrew andJen Simmons.[8]
As of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes.[9][10][11] IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except forOpera Mini.[12] Web developers targeting older browsers can utilizeModernizr 3.5.0 to detect and gracefully degrade the webpage as needed.[13]
Tailwind CSS incorporates CSS grid into its utilities for controlling how elements are sized and placed.[14] However many other current web frameworks do not incorporate CSS grid, such asBootstrap 4 andFoundation 6.[15]
The "fr" unit is often used with CSS grid layout.[16][17][18]The "fr" unit, part of the CSS grid layout specification, represents a fraction of the leftover space in the grid container.[2]
The following is an example of the"holy grail" layout:
| HTML | <html><style>div{border:1pxsolid;}body{display:grid;grid-template-columns:10emauto10em;grid-template-areas:"header header header""left middle right""footer footer footer";}</style><body><divstyle="grid-area: header">The header</div><divstyle="grid-area: footer">The footer</div><divstyle="grid-area: left">The left panel</div><divstyle="grid-area: middle; height: 200px">The main content area</div><divstyle="grid-area: right">The right panel</div></body></html> |
|---|---|
| Output |  |
The following is an example of a table of values:
| HTML | <html><style>.wrapper{display:grid;grid-template-columns:1fr1fr1fr;grid-gap:0.5em;}div{border:1pxsolid;}</style><body><divclass="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> |
|---|---|
| Output |  |
