CSS grid layout
{{Short description|CSS properties for complex responsive webpages}}
{{too abstract|date=October 2017}}
{{Infobox technology standard
| title = CSS Grid
| long_name = CSS Grid Layout Module Level 1
| native_name = CSS Grid Layout Module Level 1
| native_name_lang = en
| image = CSS Floated Layout.png
| caption = A depiction of a typical webpage layout using CSS floats.
| status = W3C Candidate Recommendation Draft
| year_started =
| first_published = {{Start date|2007|04|07}}{{Cite web|url=https://www.w3.org/standards/history/css-grid-1|title=CSS Grid Layout Module Level 1 Publication History - W3C|date=n.d.|access-date=2021-04-09|website=W3C}}
| version = Level 1
| version_date = {{Start date|2020|12|18}}{{Cite web|url=https://www.w3.org/TR/css-grid-1/|title=CSS Grid Layout Module Level 1|website=W3C|collaboration=CSS Working Group|publisher=W3C Working Group|publication-date=2021-12-18|access-date=2021-04-09
|editor-first1=Tab|editor-last1=Atkins Jr.
|editor-first2=Elika|editor-last2=J. Etemad
|editor-first3=Rossen|editor-last3=Atanassov
|editor-first4=Oriol|editor-last4=Brufau
|editor-first5=Alex|editor-last5=Mogilevsky
|editor-first6=Phil|editor-last6=Cupp
|editor-first7=Markus|editor-last7=Mielke
}}
| preview = Level 2
| preview_date = {{Start date|2023|03|14}}{{Cite web|url=https://drafts.csswg.org/css-grid/|title=CSS Grid Layout Module Level 2|website=W3C|publisher=CSS Working Group|date=2023-03-14|access-date=2023-03-26
|editor-first1=Tab|editor-last1=Atkins Jr.
|editor-first2=Elika|editor-last2=J. Etemad
|editor-first3=Rossen|editor-last3=Atanassov
}}
| organization = W3C
| committee = CSS Working Group
| editors = {{Plainlist|
- Tab Atkins Jr.
- Elika J. Etemad
- Rossen Atanassov
- Oriol Brufau
- Alex Mogilevsky
- Phil Cupp
- Markus Mielke{{Cite web|url=https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/|title=Grid Layout|website=W3C|publisher=CSS Working Group|collaboration=CSS Working Group|date=2011-04-07|access-date=2021-04-09
|editor-first1=Alex|editor-last1=Mogilevsky
|editor-first2=Phil|editor-last2=Cupp
|editor-first3=Markus|editor-last3=Mielke
|editor-first4=Daniel|editor-last4=Glazman
|editor-first1=Alex|editor-last1=Mogilevsky
|editor-first2=Markus|editor-last2=Mielke
}}
| authors =
| base_standards = CSS
| related_standards =
| abbreviation = Grid, grid layout
| domain = CSS
| license =
| website = {{URL|https://www.w3.org/TR/css-grid-1/}}
}}
{{CSS}}
In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers.{{cite web|url=https://developers.google.com/web/updates/2017/01/css-grid |title=CSS Grid – Table layout is back. Be there and be square.|website=Google Developers|author=|date=January 2017|access-date=2021-04-09}} 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.{{Cite web|title=CSS Grid Layout (level 1) {{!}} Can I use... Support tables for HTML5, CSS3, etc|url=https://caniuse.com/css-grid|access-date=2022-01-12|website=caniuse.com}}
Motivation
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.
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 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
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.{{Cite web|last=Gustafson|first=Aaron|date=2017-10-19|title=The Story of CSS Grid, from Its Creators|url=https://alistapart.com/article/the-story-of-css-grid-from-its-creators/|access-date=2022-01-12|website=A List Apart|language=en-US}}
Browser support
As of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes.{{cite news|url=https://www.onmsft.com/news/microsofts-newest-browser-gets-a-significant-boost-with-edgehtml-16|title=Microsoft's newest browser gets a significant boost with EdgeHTML 16|last1=Anderson|first1=Kareem|date=13 September 2017|access-date=7 October 2017}}{{cite news|url=https://venturebeat.com/2017/03/09/chrome-57-arrives-with-css-grid-layout-and-api-improvements/|title=Chrome 57 arrives with CSS Grid Layout and API improvements {{!}} VentureBeat|last1=Protalinski|first1=Emil|date=9 March 2017|work=VentureBeat|access-date=7 October 2017}}{{cite web|url=http://caniuse.com/#feat=css-grid|title=CSS Grid Layout|website=Can I Use|date=n.d.|access-date=2021-04-09}} IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera Mini.{{Cite web | url=https://caniuse.com/?search=grid | title="grid" | Can I use... Support tables for HTML5, CSS3, etc }} Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.{{cite news|url=https://modernizr.com/news/modernizr-3-5-0|title=Modernizr 3.5.0|last1=Ateş|first1=Faruk|website=Modernizr News|date=2017-04-13|access-date=2021-04-09}}
Utilization in frameworks
Tailwind CSS incorporates CSS grid into its utilities for controlling how elements are sized and placed.{{cite web|url=https://tailwindcss.com/docs/grid-column|title=Grid Column Start / End - Tailwind CSS|access-date=2021-04-13}} However many other current web frameworks do not incorporate CSS grid, such as Bootstrap 4 and Foundation 6.{{cite web|url=https://gist.github.com/raphaelgoetter/722e4a5843a8598f72d8dd148bd20c18|title=Flexbox grids and frameworks|archive-url=https://web.archive.org/web/20170216210600/https://gist.github.com/raphaelgoetter/722e4a5843a8598f72d8dd148bd20c18|archive-date=2017-02-16|date=2017-02-16|access-date=2021-04-09|url-status=dead|author-first=Raphael|author-last=Goetter|website=GitHub Gist}}
The fr unit
The "fr" unit is often used with CSS grid layout.{{Cite web|url=https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit|title=CSS Grid Layout: The Fr Unit|author=Alligator.io|date=2020-09-03|access-date=2021-04-09|website=DigitalOcean|publisher=DigitalOcean}}{{Cite web|url=https://ethanmarcotte.com/wrote/fractional/|title=Fractional. — Ethan Marcotte|author-first=Ethan|author-last=Marcotte|website=Ethan Marcotte|date=2018-07-18|access-date=2021-04-09}}{{Cite web|url=https://css-tricks.com/introduction-fr-css-unit/|title=An Introduction to the 'fr' CSS unit|author-first=Robin|author-last=Rendle|date=2017-06-12|access-date=2021-04-09|website=CSS-Tricks}}
The "fr" unit, part of the CSS grid layout specification, represents a fraction of the leftover space in the grid container.
Examples
= "Holy grail" layout =
The following is an example of the "holy grail" layout:
| class="wikitable"
!HTML | style="vertical-align: top;" | The header
The footer
The left panel
The main content area
The right panel
|
| Output
| style="vertical-align: top;" | CSS Grid Holy Grail Layout |
|---|
= Table of values =
The following is an example of a table of values:
| class="wikitable"
!HTML | style="vertical-align: top;" | Header1Header2Header3value11 value12 value13
value21 value22 value23
value31 value32 value33
value41 value42 value43
value51 value52 value53
value61 value62 value63
value71 value72 value73
|
| Output
| style="vertical-align: top;" | A simple implementation of the CSS Grid layout demonstrating a table layout |
|---|
References
{{reflist}}
External links
- [https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1]
- [https://codecoda.com/en/blog/entry/css-layout-grid-vs-flexbox CSS Grid vs Flexbox]
- [https://tailwindgenerator.com/grid-generator Tailwind CSS Grid Generator]
{{W3C Standards}}
Category:Cascading Style Sheets layouts