CSS Grid Layout
- Summary
-
Discussion
- Why should I adopt CSS Grid when there's already CSS Flexbox?
- Which are the key building blocks of CSS Grid?
- What are the different ways of specifying width in CSS Grid?
- How do I control the alignment of content in CSS Grid?
- What are named areas and where are they useful?
- When there's nested grids, what's the use of subgrids?
- Could you share additional technical details on CSS Grid?
- What are some resources for beginners to learn CSS Grid?
- Milestones
- References
- Further Reading
- Article Stats
- Cite As
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? Traditionally, layout was done using HTML tables. Then came CSS properties
display
,float
andposition
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 of aligning items both horizontally and vertically. Interestingly, items within the grid can 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? 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.
- Container: This is the element that contains the grid within it. It's defined by CSS
-
What are the different ways of specifying width in CSS Grid? Grid items, rows and columns can be sized explicitly using CSS properties
grid-template-rows
andgrid-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. Ifgrid-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. Whilepx
specifies fixed sizes,fr
specifies flexible sizes. Fractional sizes are calculated based on remaining space after other length values have been processed. For example, givengrid-template-columns: 3rem 25% 1fr 2fr
, the calculation would be1fr = ((gridwidth) - (3rem) - (25% of gridwidth)) / 3
. The valueauto
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 andalign-self
for vertical alignment. These effectively adjust margins for the items. Each of these properties can take values start, end, center, or stretch.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 andalign-items
for vertical alignment. As a shortcut, there's alsoplace-items
that specifies alignment in both directions.What if all the grid's tracks take up a space smaller the container? Then
justify-content
andalign-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. -
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
, andgrid-row-end
. Shortcuts for these aregrid-column
andgrid-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
andgrid-column-gap
, withgrid-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 thegrid-template-areas
property. For a responsive design, we could use media queries to switch between different definitions of template areas without duplicating the content. -
When there's nested grids, what's the use of subgrids? 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 multiple lines, subsequent content within the inner grid will not be aligned across cards (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 withrow-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
andgrid-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, Rachel Andrew's Grid by Example and Layout Lab by Jen Simmons.
An interactive CSS Grid cheatsheet 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 to see current support.
Milestones
2005
2009
2011
Microsoft needs a flexible layout tool for the web and native app development on Windows. With some inspiration from Silverlight, 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.
2011
2017
2018
W3C publishes the first working draft of CSS Grid Layout Module Level 2. Level 2 adds subgrid capabilities and allows nested grids to participate in the sizing of parent grids. It also adds aspect-ratio-controlled gutters. In December 2019, Firefox becomes the first browser to implement subgrids and continues to be the only browser even in December 2020.
References
- Aderinokun, Ire. 2017. "CSS Grid Layout Terminology, Explained." Bitsofcode, February 07. Accessed 2019-05-27.
- Andrew, Rachel. 2015. "Three years with CSS Grid Layout." November 03. Accessed 2019-05-27.
- Babich, Nick. 2019. "Top Website Layouts That Never Grow Old." Xd Ideas, Adobe, November 8. Accessed 2020-07-21.
- CSS-Tricks. 2016. "A Complete Guide to Grid." CSS-Tricks, November 06. Updated 2019-04-03. Accessed 2019-05-27.
- Caniuse. 2020. "subgrid." Caniuse. Accessed 2020-12-12.
- Coyier, Chris. 2019. "Quick! What’s the Difference Between Flexbox and Grid?" CSS-Tricks, February 12. Updated 2019-02-14. Accessed 2019-05-27.
- Gustafson, Aaron. 2017. "The Story of CSS Grid, from Its Creators." October 19. Accessed 2019-05-27.
- JavaScript Teacher. 2018a. "CSS Grid — The Swiss Army Knife For Website and Application Layouts." Medium, July 31. Accessed 2019-05-27.
- JavaScript Teacher. 2018b. "CSS Grid — The Beginner’s Guide." freeCodeCamp, July 30. Accessed 2019-05-27.
- Layout Land. 2018a. "Flexbox vs. CSS Grid — Which is Better?" Layout Land, on YouTube, January 29. Accessed 2019-05-27.
- Layout Land. 2018b. "9 Biggest Mistakes with CSS Grid." Layout Land, on YouTube, July 16. Accessed 2019-05-27.
- MDN Web Docs. 2019a. "Box alignment in CSS Grid Layout." Mozilla Developer Network, March 23. Accessed 2019-05-27.
- MDN Web Docs. 2019b. "CSS Grid Inspector: Examine grid layouts." Mozilla Developer Network, March 23. Accessed 2019-05-27.
- Otto, Mark. 2011. "Bootstrap from Twitter." Blog, Twitter, August 19. Accessed 2019-05-27.
- Paolino, Johna. 2019. "CSS Grid for Designers." Times Open, via Medium, January 03. Accessed 2019-05-27.
- Rego, Manuel. 2017. "CSS Grid Layout: A New Layout Module for the Web." Blog, WebKit, March 09. Accessed 2019-05-27.
- Rendle, Robin. 2017. "Does CSS Grid Replace Flexbox?" CSS-Tricks, March 31. Accessed 2019-05-27.
- Statuscode. 2018. "CSS Grid Explained Quickly (with diagrams and code)." Statuscode, on YouTube, January 07. Accessed 2019-05-27.
- Suh, Jonathan. 2019. "Homepage." Learn CSS Grid. Accessed 2019-05-27.
- Tubik Studio. 2017. "Best Practices for Website Header Design." UX Planet, on Medium, June 2. Accessed 2020-07-21.
- Vujasinović, Ekaterina. 2020. " CSS Subgrid - How to Build Complex Layouts in a Simple Way." Ditdot, August 19. Accessed 2020-12-12.
- W3C. 2005. "CSS3 Advanced Layout Module." W3C Working Draft, December 15. Accessed 2019-05-27.
- W3C. 2009. "CSS Template Layout Module." W3C Working Draft, April 02. Accessed 2019-05-27.
- W3C. 2011. "Grid Layout." W3C Working Draft, April 07. Accessed 2019-05-27.
- W3C. 2017. "CSS Grid Layout Module Level 1." W3C Candidate Recommendation, December 14. Accessed 2019-05-27.
- W3C. 2018a. "CSS Flexible Box Layout Module Level 1." W3C Candidate Recommendation, November 19. Accessed 2019-05-27.
- W3C. 2018b. "CSS Grid Layout Module Level 2." W3C Working Draft, June 28. Accessed 2019-05-27.
- W3C. 2018c. "CSS Box Alignment Module Level 3." Editor's Draft, December 06. Accessed 2019-05-27.
Further Reading
- Aderinokun, Ire. 2017. "CSS Grid Layout Terminology, Explained." Bitsofcode, February 07. Accessed 2019-05-27.
- Coyier, Chris. 2019. "Quick! What’s the Difference Between Flexbox and Grid?" CSS-Tricks, February 12. Updated 2019-02-14. Accessed 2019-05-27.
- CSS-Tricks. 2016. "A Complete Guide to Grid." CSS-Tricks, November 06. Updated 2019-04-03. Accessed 2019-05-27.
- Gustafson, Aaron. 2017. "The Story of CSS Grid, from Its Creators." October 19. Accessed 2019-05-27.
- JavaScript Teacher. 2018b. "CSS Grid — The Beginner’s Guide." freeCodeCamp, July 30. Accessed 2019-05-27.
- Suh, Jonathan. 2019. "Homepage." Learn CSS Grid. Accessed 2019-05-27.
Article Stats
Cite As
See Also
- CSS Flexbox
- Cascading Style Sheets
- CSS Modules
- CSS Architecture
- Web Components
- Material Design