CSS grid layout

Last updated
CSS Grid
CSS Grid Layout Module Level 1
CSS Floated Layout.png
A depiction of a typical webpage layout using CSS floats.
AbbreviationGrid, grid layout
Native name
CSS Grid Layout Module Level 1
StatusW3C Candidate Recommendation Draft
First publishedApril 7, 2007 (2007-04-07) [1]
Latest versionLevel 1
December 18, 2020 (2020-12-18) [2]
Preview versionLevel 2
March 14, 2023 (2023-03-14) [3]
Organization W3C
CommitteeCSS Working Group
Editors
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
  • Oriol Brufau
  • Alex Mogilevsky
  • Phil Cupp
  • Markus Mielke [4] [5]
[3]
Base standards CSS
Domain CSS
Website www.w3.org/TR/css-grid-1/

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]

Contents

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. [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

The first comprehensive draft of a grid layout for CSS was created by Phil Cupp 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

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

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

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

"Holy grail" layout

The following is an example of the "holy grail" layout:

HTMLOutput
<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>
 CSS Grid Holy Grail Layout.png

Table of values

The following is an example of a table of values:

HTMLOutput
<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>
 CSS Grid table layout.png

Related Research Articles

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Web colors are colors used in displaying web pages on the World Wide Web; they can be described by way of three methods: a color may be specified as an RGB triplet, in hexadecimal format or according to its common English name in some cases. A color tool or other graphics software is often used to generate color values. In some uses, hexadecimal color codes are specified with notation using a leading number sign (#). A color is specified according to the intensity of its red, green and blue components, each represented by eight bits. Thus, there are 24 bits used to specify a web color within the sRGB gamut, and 16,777,216 colors that may be so specified.

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

<span class="mw-page-title-main">Bert Bos</span> Dutch computer scientist

Gijsbert (Bert) Bos is a Dutch computer scientist known for the development of Argo, a web browser he developed as test application for his style sheet proposal.

<span class="mw-page-title-main">Grid (graphic design)</span> Used in graphic design to guide objects

In graphic design, a grid is a structure made up of a series of intersecting straight or curved lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

<span class="mw-page-title-main">Initial</span> Letter with figurative image inside it in mediaeval manuscripts

In a written or published work, an initial is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning. An initial is often several lines in height and in older books or manuscripts are known as "inhabited" initials. Certain important initials, such as the Beatus initial or "B" of Beatus vir... at the opening of Psalm 1 at the start of a vulgate Latin. These specific initials in an illuminated manuscript were also called initiums.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

<span class="mw-page-title-main">CSS animations</span> CSS3 properties that would let some HTML elements animate

CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to JavaScript code that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python.

<span class="mw-page-title-main">Responsive web design</span> Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

The emphasis mark or emphasis dot is a typographic marking used in some East Asian languages to indicate emphasis. The markings takes in many forms like, a dot or a bullet, a circle, or a triangle. It was used more traditionally, but nowadays, with technology, quotations or changing of font style prevails.

The CSS Working Group is a working group created by the World Wide Web Consortium (W3C) in 1997, to tackle issues that had not been addressed with CSS level 1. As of December 2022, the CSSWG had 147 members.

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS web layout model. It is in the W3C's candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.

Prince is a computer program that converts XML and HTML documents into PDF files by applying Cascading Style Sheets (CSS). Prince is a commercial product, which is free to download and use for non-commercial purposes.

<span class="mw-page-title-main">Jen Simmons</span> Web designer and developer

Jen Simmons is an American graphic designer, web developer, educator and speaker known for her expertise in web standards, particularly HTML and CSS. She is a member of the CSS Working Group and has been prominent in the deployment of CSS grid layout. She worked as a developer advocate at Mozilla and later at Apple.

References

  1. ↑ "CSS Grid Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
  2. 1 2 3 4 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.
  3. 1 2 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.
  4. ↑ Mogilevsky, Alex; Cupp, Phil; Mielke, Markus; Glazman, Daniel, eds. (2011-04-07). "Grid Layout". W3C. CSS Working Group. Retrieved 2021-04-09.
  5. ↑ Mogilevsky, Alex; Mielke, Markus, eds. (2007-09-05). "CSS Grid Positioning Module Level 3". W3C. CSS Working Group. Retrieved 2021-04-09.
  6. ↑ "CSS Grid – Table layout is back. Be there and be square". Google Developers. January 2017. Retrieved 2021-04-09.
  7. ↑ "CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2022-01-12.
  8. ↑ Gustafson, Aaron (2017-10-19). "The Story of CSS Grid, from Its Creators". A List Apart. Retrieved 2022-01-12.
  9. ↑ Anderson, Kareem (13 September 2017). "Microsoft's newest browser gets a significant boost with EdgeHTML 16" . Retrieved 7 October 2017.
  10. ↑ Protalinski, Emil (9 March 2017). "Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat". VentureBeat. Retrieved 7 October 2017.
  11. ↑ "CSS Grid Layout". Can I Use. n.d. Retrieved 2021-04-09.
  12. ↑ ""grid" | Can I use... Support tables for HTML5, CSS3, etc".
  13. ↑ Ateş, Faruk (2017-04-13). "Modernizr 3.5.0". Modernizr News. Retrieved 2021-04-09.
  14. ↑ "Grid Column Start / End - Tailwind CSS" . Retrieved 2021-04-13.
  15. ↑ Goetter, Raphael (2017-02-16). "Flexbox grids and frameworks". GitHub Gist. Archived from the original on 2017-02-16. Retrieved 2021-04-09.
  16. ↑ Alligator.io (2020-09-03). "CSS Grid Layout: The Fr Unit". DigitalOcean. DigitalOcean. Retrieved 2021-04-09.
  17. ↑ Marcotte, Ethan (2018-07-18). "Fractional. — Ethan Marcotte". Ethan Marcotte. Retrieved 2021-04-09.
  18. ↑ Rendle, Robin (2017-06-12). "An Introduction to the 'fr' CSS unit". CSS-Tricks. Retrieved 2021-04-09.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.