DEVOPEDIA (/)

for developers. by developers.

(/)
CSS G rid L ayout 

When displaying content on a webpage, there's often a need to layout the content in a particular way. For 
example, we may want the header and footer sections to span the entire width of the viewport while the 
main content be organized as a three-column layout. Header section itself may be divided into a fixed-width 


logo section to the left and a flexible-width title section to the right. 

CSS Grid Layout is a standard that gives user interface designers a powerful system to implement layouts 

with ease. It's part of the CSS3 specification standardized by W3C.

It's meant to complement and not replace earlier systems such as CSS Flexbox. 

Discussion

 Why should I adopt CSS Grid when there's already CSS Flexbox?

Flexbox vs. CSS Grid — Which is Better?

CSS Grid compared with Flexbox. Source: Layout Land 2018a.



Traditionally, layout was done using HTML tables. Then came CSS properties display , float and position
that allowed us to control the layout. While these are still relevant, Flexbox came along to provide an easier
way to distribute space and align content. 

The limitation with Flexbox is that it does layout only in one direction. Thus, items can be laid out horizontally
but not vertically at the same time. Even if the items were to wrap across multiple lines, items on each line will
not be aligned to those on other lines. Via nesting, Flexbox can be used to create two-dimensional layouts


but CSS Grid is easier to use. 

 CSS Grid is capable
DEVOPEDIA (/) of aligning items both horizontally and vertically. Interestingly, items within the grid can
®

for developers. by developers.

(/) also overlap, which neither Flexbox nor a HTML table element is capable of doing. 

CSS Grid doesn't replace Flexbox. Grid items can be flex parents and vice versa.  




 Which are the key building blocks of CSS Grid?

Grid Line 
1 2 3 4 5 6
1

Grid Cell

Grid Track (Row)

4 Grid
Track
(Column)

5 Grid Area

Annotating the key building blocks of CSS Grid. Source: Rego 2017.



CSS Grid has the following parts:  

Container: This is the element that contains the grid within it. It's defined by CSS display: grid .

Item: Immediate child elements of a container are grid items. Grandchildren and further nested
elements are not considered as grid items.

Line: A grid is split into rows and columns using grid lines. Lines also define the container's borders.
Lines are numbered, starting from 1. Thus, a grid of m rows will have m+1 horizontal lines; of n columns will
have n+1 vertical lines.

Track: A grid track is a generic term for a grid row or column. It's the space between two adjacent grid
lines.

Cell: This is an intersection of a row and a column. It's the smallest unit of the grid that can be
referenced.

Area: This consists of one or more adjacent grid cells.

 DEVOPEDIA (/)
®

for developers. by developers.

(/)
 What are the different ways of specifying width in CSS Grid? 







Illustrating widths of grid items. Source: JavaScript Teacher 2018b.




Grid items, rows and columns can be sized explicitly using CSS properties grid-template-rows and grid-
template-columns . For example, grid-template-columns: 90px 50px 120px defines three columns with exact
sizes. 

What if we had five items but only two columns are defined? The extra three grid items will be sized
implicitly. If grid-auto-flow: column , we'll end up with five columns. If grid-auto-flow: row , we'll end up
with three rows with the last row having only one item. 

For explicit sizes we can use px , em , % , etc. Fractional sizes ( fr ) can also be used. Thus, grid-template-
columns: 1fr 2fr will make two columns, with the second one twice as wide as the first. While px specifies
fixed sizes, fr specifies flexible sizes. Fractional sizes are calculated based on remaining space after other
length values have been processed. For example, given grid-template-columns: 3rem 25% 1fr 2fr , the
calculation would be 1fr = ((gridwidth) - (3rem) - (25% of gridwidth)) / 3 . The value auto will stretch 

grid item to fill remaining space. 

 How do I control the alignment of content in CSS Grid?

A grid item can be aligned within its cell or area using CSS property justify-self for horizontal alignment
and align-self for vertical alignment. These effectively adjust margins for the items. Each of these
properties can take values start, end, center, or stretch.  
 DEVOPEDIA (/)
®

for developers. by developers.

(/)








Illustrating alignment in CSS Grid. Source: Paolino 2019.




What if we wish to apply the same alignment to all grid items? This is done by specifying CSS properties at the
container level. Use justify-items for horizontal alignment and align-items for vertical alignment. As a
shortcut, there's also place-items that specifies alignment in both directions. 

What if all the grid's tracks take up a space smaller the container? Then justify-content and align-content
becomes useful not just for alignment but also for adding spaces in the right places to fill the container.
These effectively adjust padding for the container. Some allowed values include normal, start, end, center,


stretch, space-around, space-between, space-evenly, baseline, first baseline, and last baseline. 

Alignment works for both inline and block elements. 

 What are named areas and where are they useful?

We can make an item span multiple columns using grid-column-start , grid-column-end , grid-row-start ,
and grid-row-end . Shortcuts for these are grid-column and grid-row . For example, grid-column: 3 / span
2 says that item will start from third column and span two columns. 

Grid areas offer a simpler way to avoid using grid line numbers. Areas can be only rectangles. Areas are
named for easy referencing. Gaps can exist between areas but not between cells within an area. Gaps 

themselves can be set using grid-row-gap and grid-column-gap , with grid-gap as a shorthand to set both. 

Grid gaps are also called gutters. 

Within HTML elements, use CSS property grid-area to name the target area. This tells exactly in which area
this content must be placed. The mapping of grid cells to grid areas is done using the grid-template-areas
property. For a responsive design, we could use media queries to switch between different definitions of


template areas without duplicating the content.  

 DEVOPEDIA (/)
®

for developers. by developers.

(/)








Grid areas help implement an entire webpage layout. Source: JavaScript Teacher 2018a.



 When there's nested grids, what's the use of subgrids?

Comparing nested grids and subgrids. Source: Adapted from Vujasinović 2020.



Consider the use of grids to lay out cards. With nested grids, each card has an inner grid that's used to
organize card title, an image and a description. Layout of contents in the inner grid is independent of the
outer grid. Moreover, one card is not aware of alignment of contents in another card. This means that if some
 card titles run into
DEVOPEDIA (/)multiple lines, subsequent content within the inner grid will not be aligned across cards
®

for developers. by developers.

(/) (the outer grid). 

Subgrid solves this problem. A subgrid defers the definition of its rows and columns to its parent grid 

container. Content of the subgrid influence the sizing and alignment of its parent container.  

A subgrid can be created with { display:grid; grid-template-columns:subgrid; grid-template-

rows:subgrid; } . It's possible to create rows-only or columns-only subgrid. Within the subgrid, we may not

want extra spacing between rows. This is achieved with row-gap:0 . 




 Could you share additional technical details on CSS Grid?

It's interesting to note that grid line numbers can be negative. Value -1 refers to last line; value -2 is last but
one line; and so on. Also, fractional widths can be floating point numbers.
 

With fractional units, available space is filled up but it still obeys the minimum size of container or the content
within. Sizes are not calculated upfront. Only after content is placed into grid items, the sizes of grid tracks
are calculated. 

By default, grid items will be stretched to fit the grid area. Avoid using percentages in paddings or margins on
grid items. Number of rows and columns can be defined using grid-template-areas , grid-template-rows
and grid-template-columns . If there's conflict, the larger number will be used. 

Don't assume you need breakpoints, for example, to reflow content with varying number of columns. Sizing
with only percentages will not help you exercise the full power and flexibility of CSS Grid. CSS Grid is simple
enough to be used directly. Don't look for a grid framework. 

 What are some resources for beginners to learn CSS Grid?

From the many online resources to learn CSS Grid, we mention a few: A Complete Grid Guide by CSS-Tricks
(https://css-tricks.com/snippets/css/complete-guide-grid/), Rachel Andrew's Grid by Example
(https://gridbyexample.com/) and Layout Lab by Jen Simmons (https://labs.jensimmons.com/).

An interactive CSS Grid cheatsheet (https://alialaa.github.io/css-grid-cheat-sheet/) from Ali Alaa is handy.

For debugging CSS Grid, there are browser add-ons that developers can use. Firefox DevTools comes with
Grid Inspector to inspect the grid and show line numbers and grid area names. 

Most browsers support CSS Grid, including partial support from IE11. See Can I Use
(https://caniuse.com/#feat=css-grid) to see current support.

Milestones
The Swiss formalize the use of grids as a design tool. They see grids as bringing order to a design layout.

 1940
DEVOPEDIA (/)
®

for developers. by developers.

(/)
Frame-based layout via stylesheets is proposed.


1996 


Dec
2005 




Content is laid out within regions of a document. Source: W3C 2005, fig. 1.



CSS3 Advanced Layout Module is proposed. By April 2009, this becomes CSS Template Layout Module. The idea of CSS Grid
 

Layout closely follows from these early drafts. However, these early proposals are not adopted by browser makers.
 

Jul
2009

Flexbox (top) is 1-D while CSS Grid (bottom) is 2-D. Source: Coyier 2019.



W3C publishes a working draft of CSS Flexible Box Layout or Flexbox. After multiple revisions, first Candidate Recommendation of
Flexbox is released in September 2012.


Microsoft needs a flexible layout tool for the web and native app development on Windows. With some inspiration from Silverlight,
Apr
2011 Microsoft ships IE10 with an implementation of a grid layout behind -ms- vendor prefix. This is followed with a W3C working draft
of CSS Grid Layout. Thus, for the first time W3C gets a draft along with a working implementation.
 

After many months of internal development, Twitter open sources Bootstrap. It's a CSS framework that enables easier creation of


Aug
layouts based on a 12-column grid. CSS Grid provides a more flexible layout since designers need not start with 12 columns.


2011

W3C publishes CSS Grid Layout Module Level 1 as a Candidate Recommendation. This is also the year when many major


May
browsers start supporting CSS Grid.


2017

W3C publishes the first working draft of CSS Grid Layout Module Level 2. Level 2 adds subgrid capabilities and allows nested
Feb
grids to participate in the sizing of parent grids. It also adds aspect-ratio-controlled gutters. In December 2019, Firefox becomes


2018
the first browser to implement subgrids and continues to be the only browser even in December 2020.

 DEVOPEDIA (/)
®

for developers. by developers.

(/)
References 

1. Aderinokun, Ire. 2017. "CSS Grid Layout Terminology, Explained." Bitsofcode, February 07. Accessed 2019-05-27. (https://bitsofco.de/css-grid-terminology/) 

(https://web.archive.org/web/20200620121909/https://bitsofco.de/css-grid-terminology/)

2. Andrew, Rachel. 2015. "Three years with CSS Grid Layout." November 03. Accessed 2019-05-27. (https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid- 
layout/)  (https://web.archive.org/web/20200620122143/https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/)

3. Babich, Nick. 2019. "Top Website Layouts That Never Grow Old." Xd Ideas, Adobe, November 8. Accessed 2020-07-21. (https://xd.adobe.com/ideas/principles/web-design/11-
website-layouts-that-made-content-shine-in-2019/)  (https://web.archive.org/web/20200721030543/https://xd.adobe.com/ideas/principles/web-design/11-website-layouts- 
that-made-content-shine-in-2019/)

4. CSS-Tricks. 2016. "A Complete Guide to Grid." CSS-Tricks, November 06. Updated 2019-04-03. Accessed 2019-05-27. (https://css-tricks.com/snippets/css/complete-guide-grid/)
 (https://web.archive.org/web/20200620122106/https://css-tricks.com/snippets/css/complete-guide-grid/) 
5. Caniuse. 2020. "subgrid." Caniuse. Accessed 2020-12-12. (https://caniuse.com/?search=subgrid)  (https://web.archive.org/web/20201106161140/https://caniuse.com/?
search=subgrid)

6. Coyier, Chris. 2019. "Quick! What’s the Difference Between Flexbox and Grid?" CSS-Tricks, February 12. Updated 2019-02-14. Accessed 2019-05-27. (https://css-tricks.com/quick-
whats-the-difference-between-flexbox-and-grid/)  (https://web.archive.org/web/20200620122214/https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/)

7. Gustafson, Aaron. 2017. "The Story of CSS Grid, from Its Creators." October 19. Accessed 2019-05-27. (https://alistapart.com/article/the-story-of-css-grid-from-its-creators/) 
(https://web.archive.org/web/20200620122151/https://alistapart.com/article/the-story-of-css-grid-from-its-creators/)

8. JavaScript Teacher. 2018a. "CSS Grid — The Swiss Army Knife For Website and Application Layouts." Medium, July 31. Accessed 2019-05-27. (https://medium.com/@js_tut/css-grid-
the-swiss-army-knife-for-cutting-website-and-application-layouts-c1bd7a6b4e56)  (https://web.archive.org/web/20200620122049/https://medium.com/@js_tut/css-grid-the-
swiss-army-knife-for-cutting-website-and-application-layouts-c1bd7a6b4e56)

9. JavaScript Teacher. 2018b. "CSS Grid — The Beginner’s Guide." freeCodeCamp, July 30. Accessed 2019-05-27. (https://www.freecodecamp.org/news/css-grid-the-beginners-
guide-45998e6f6b8/)

10. Layout Land. 2018a. "Flexbox vs. CSS Grid — Which is Better?" Layout Land, on YouTube, January 29. Accessed 2019-05-27. (https://www.youtube.com/watch?v=hs3piaN4b5I) 
(https://web.archive.org/web/20200620122016/https://www.youtube.com/watch?v=hs3piaN4b5I)

11. Layout Land. 2018b. "9 Biggest Mistakes with CSS Grid." Layout Land, on YouTube, July 16. Accessed 2019-05-27. (https://www.youtube.com/watch?v=0Gr1XSyxZy0) 
(https://web.archive.org/web/20200620122025/https://www.youtube.com/watch?v=0Gr1XSyxZy0)

12. MDN Web Docs. 2019a. "Box alignment in CSS Grid Layout." Mozilla Developer Network, March 23. Accessed 2019-05-27. (https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)  (https://web.archive.org/web/20200620122115/https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)

13. MDN Web Docs. 2019b. "CSS Grid Inspector: Examine grid layouts." Mozilla Developer Network, March 23. Accessed 2019-05-27. (https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)  (https://web.archive.org/web/20200620122122/https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)

14. Otto, Mark. 2011. "Bootstrap from Twitter." Blog, Twitter, August 19. Accessed 2019-05-27. (https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) 
(https://web.archive.org/web/20200620122042/https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html)

15. Paolino, Johna. 2019. "CSS Grid for Designers." Times Open, via Medium, January 03. Accessed 2019-05-27. (https://open.nytimes.com/css-grid-for-designers-f74a883b98f5) 
(https://web.archive.org/web/20201211131940/https://open.nytimes.com/css-grid-for-designers-f74a883b98f5)

16. Rego, Manuel. 2017. "CSS Grid Layout: A New Layout Module for the Web." Blog, WebKit, March 09. Accessed 2019-05-27. (https://webkit.org/blog/7434/css-grid-layout-a-new-
layout-module-for-the-web/)  (https://web.archive.org/web/20200620122009/https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/)

17. Rendle, Robin. 2017. "Does CSS Grid Replace Flexbox?" CSS-Tricks, March 31. Accessed 2019-05-27. (https://css-tricks.com/css-grid-replace-flexbox/) 
(https://web.archive.org/web/20200620122035/https://css-tricks.com/css-grid-replace-flexbox/)

18. Statuscode. 2018. "CSS Grid Explained Quickly (with diagrams and code)." Statuscode, on YouTube, January 07. Accessed 2019-05-27. (https://www.youtube.com/watch?
v=ojKbYz0iKQE)  (https://web.archive.org/web/20200620122057/https://www.youtube.com/watch?v=ojKbYz0iKQE)

19. Suh, Jonathan. 2019. "Homepage." Learn CSS Grid. Accessed 2019-05-27. (https://learncssgrid.com/)  (https://web.archive.org/web/20200620122206/https://learncssgrid.com/)

20. Tubik Studio. 2017. "Best Practices for Website Header Design." UX Planet, on Medium, June 2. Accessed 2020-07-21. (https://uxplanet.org/best-practices-for-website-header-
design-e0d55bf5f1e2)  (https://web.archive.org/web/20201211131956/https://uxplanet.org/best-practices-for-website-header-design-e0d55bf5f1e2)

21. Vujasinović, Ekaterina. 2020. " CSS Subgrid - How to Build Complex Layouts in a Simple Way." Ditdot, August 19. Accessed 2020-12-12. (https://www.ditdot.hr/en/css-subgrid-
how-to-build-complex-layouts-in-a-simple-way)

22. W3C. 2005. "CSS3 Advanced Layout Module." W3C Working Draft, December 15. Accessed 2019-05-27. (https://www.w3.org/TR/2005/WD-css3-layout-20051215/) 
(https://web.archive.org/web/20200620122129/https://www.w3.org/TR/2005/WD-css3-layout-20051215/)

23. W3C. 2009. "CSS Template Layout Module." W3C Working Draft, April 02. Accessed 2019-05-27. (https://www.w3.org/TR/2009/WD-css3-layout-20090402/) 
(https://web.archive.org/web/20200620122136/https://www.w3.org/TR/2009/WD-css3-layout-20090402/)

24. W3C. 2011. "Grid Layout." W3C Working Draft, April 07. Accessed 2019-05-27. (https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) 
(https://web.archive.org/web/20200619122408/https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/)

25. W3C. 2017. "CSS Grid Layout Module Level 1." W3C Candidate Recommendation, December 14. Accessed 2019-05-27. (https://www.w3.org/TR/css-grid-1/) 
(https://web.archive.org/web/20200620121917/https://www.w3.org/TR/css-grid-1/)

26. W3C. 2018a. "CSS Flexible Box Layout Module Level 1." W3C Candidate Recommendation, November 19. Accessed 2019-05-27. (https://www.w3.org/TR/css-flexbox-1/) 
(https://web.archive.org/web/20200620121942/https://www.w3.org/TR/css-flexbox-1/)

27. W3C. 2018b. "CSS Grid Layout Module Level 2." W3C Working Draft, June 28. Accessed 2019-05-27. (https://www.w3.org/TR/2018/WD-css-grid-2-20180628/) 
(https://web.archive.org/web/20200620121952/https://www.w3.org/TR/2018/WD-css-grid-2-20180628/)

28. W3C. 2018c. "CSS Box Alignment Module Level 3." Editor's Draft, December 06. Accessed 2019-05-27. (https://drafts.csswg.org/css-align-3/) 
(https://web.archive.org/web/20200620121959/https://drafts.csswg.org/css-align-3/)
 DEVOPEDIA (/)
®

for developers. by developers.

(/)
Further Reading 

1. Aderinokun, Ire. 2017. "CSS Grid Layout Terminology, Explained." Bitsofcode, February 07. Accessed 2019-05-27. (https://bitsofco.de/css-grid-terminology/)

2. Coyier, Chris. 2019. "Quick! What’s the Difference Between Flexbox and Grid?" CSS-Tricks, February 12. Updated 2019-02-14. Accessed 2019-05-27. (https://css-tricks.com/quick- 
whats-the-difference-between-flexbox-and-grid/)

3. CSS-Tricks. 2016. "A Complete Guide to Grid." CSS-Tricks, November 06. Updated 2019-04-03. Accessed 2019-05-27. (https://css-tricks.com/snippets/css/complete-guide-grid/)

4. Gustafson, Aaron. 2017. "The Story of CSS Grid, from Its Creators." October 19. Accessed 2019-05-27. (https://alistapart.com/article/the-story-of-css-grid-from-its-creators/) 
5. JavaScript Teacher. 2018b. "CSS Grid — The Beginner’s Guide." freeCodeCamp, July 30. Accessed 2019-05-27. (https://www.freecodecamp.org/news/css-grid-the-beginners-

guide-45998e6f6b8/)

6. Suh, Jonathan. 2019. "Homepage." Learn CSS Grid. Accessed 2019-05-27. (https://learncssgrid.com/) 

Article Stats
1736 1 6
Words Authors Edits

2 2 7180
Chats Likes Hits

Cite As
Devopedia. 2020. "CSS Grid Layout." Version 6, December 12. Accessed 2023-05-02. https://devopedia.org/css-grid-layout

COPY CI TATI ON

ABOUT ( /SITE-INFO/ABOUT) FOUNDATION ( /SITE-INFO/FOUNDATION)

TERMS OF USE ( /SITE-INFO/ TERMS -OF-USE) TRUSTEES ( /SITE-INFO/FOUNDATION#TRUSTEES)

PRIVACY POLICY ( /SITE-INFO/ TERMS -OF- DONATIONS ( /SITE-INFO/FOUNDATION#DONATIONS)

USE#PRIVACY-POLICY)

MISSION ( /SITE-INFO/ABOUT#MISSION) EVENTS ( /SITE-MAP/COMMUNITY-OUTREACH?EVENTS)

VALUES ( /SITE-INFO/ABOUT#VALUES) REPORT ISSUES

LICENSING ( /SITE-INFO/ABOUT#LICENSING) (HT TPS: //GITHUB.COM/DEVOPEDIAORG/ WEBAPP/ISSUES)

OPEN SOURCE (HT TPS: //GITHUB.COM/DEVOPEDIAORG)

(https://creativecommons.org/licenses/by-

(https://www.facebook.com/Devopedia/) (https://
sa/4.0/)