CSS grid layout
| CSS Grid | |
|---|---|
| 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 (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 | |
| 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 grid layouts more easily and consistently across browsers.[6] Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard (it is a W3C Candidate Recommendation) although it has been adopted by the recent versions of all current major browsers.[7]
Motivation
[edit ]CSS grid can create more robust and flexible layouts than the previous 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.[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.
History
[edit ]The first comprehensive draft of a grid layout for CSS was created by Phil Cupp, Markus Mielke and Alex Mogilevsky at Microsoft in 2011 and implemented in Internet Explorer 10 behind a -ms- vendor prefix. The syntax was restructured and further refined through several iterations in the CSS Working Group, led primarily by Elika Etemad and Tab Atkins Jr. The feature was widely adopted by web developers after evangelism led primarily by Rachel Andrew and Jen Simmons.[8]
Browser support
[edit ]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 for Opera Mini.[12] Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.[13]
Utilization in frameworks
[edit ]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 as Bootstrap 4 and Foundation 6.[15]
The fr unit
[edit ]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]
Examples
[edit ]"Holy grail" layout
[edit ]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> <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> |
|---|---|
| Output | CSS Grid Holy Grail Layout |
Table of values
[edit ]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> <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> |
|---|---|
| Output | A simple implementation of the CSS Grid layout demonstrating a table layout |
References
[edit ]- ^ "CSS Grid Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021年04月09日.
- ^ a b c d 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, eds. (2023年03月14日). "CSS Grid Layout Module Level 2". W3C. CSS Working Group. Retrieved 2023年03月26日.
- ^ 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 Developers. January 2017. Retrieved 2021年04月09日.
- ^ "CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2022年01月12日.
- ^ Gustafson, Aaron (2017年10月19日). "The Story of CSS Grid, from Its Creators". A List Apart. Retrieved 2022年01月12日.
- ^ 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. n.d. Retrieved 2021年04月09日.
- ^ ""grid" | Can I use... Support tables for HTML5, CSS3, etc".
- ^ Ateş, Faruk (2017年04月13日). "Modernizr 3.5.0". Modernizr News. Retrieved 2021年04月09日.
- ^ "Grid Column Start / End - Tailwind CSS" . Retrieved 2021年04月13日.
- ^ Goetter, Raphael (2017年02月16日). "Flexbox grids and frameworks". GitHub Gist. Archived from the original on 2017年02月16日. Retrieved 2021年04月09日.
- ^ Alligator.io (2020年09月03日). "CSS Grid Layout: The Fr Unit". DigitalOcean. DigitalOcean. Retrieved 2021年04月09日.
- ^ Marcotte, Ethan (2018年07月18日). "Fractional. — Ethan Marcotte". Ethan Marcotte. Retrieved 2021年04月09日.
- ^ Rendle, Robin (2017年06月12日). "An Introduction to the 'fr' CSS unit". CSS-Tricks. Retrieved 2021年04月09日.