cid 2d240e1d20b8beef09f7846b64b569e0b17aa2514365355dfd408ed2c74b269c · original · open access · via w3c
Title: CSS Grid Layout Module Level 1
Authors:
Venue: w3c
Year: 2025
Canonical: w3c:css-grid-1
URL: https://www.w3.org/TR/css-grid-1/
Collector: w3c
OA: true
ABSTRACT
CSS Grid Layout Module Level 1 CSS Grid Layout Module Level 1 W3C Candidate Recommendation Draft, 26 March 2025 More details about this document This version: https://www.w3.org/TR/2025/CRD-css-grid-1-20250326/ Latest published version: https://www.w3.org/TR/css-grid-1/ Editor's Draft: https://drafts.csswg.org/css-grid-1/ History: https://www.w3.org/standards/history/css-grid-1/ Implementation Report: https://wpt.fyi/results/css/css-grid Feedback: CSSWG Issues Repository Disposition of Comments CSSWG GitHub Inline In Spec Editors: Tab Atkins Jr. (Google) Elika J. Etemad / fantasai (Apple) Rossen Atanassov (Microsoft) Oriol Brufau (Igalia) Former Editors: Alex Mogilevsky (Microsoft Corporation) Phil Cupp (Microsoft Corporation) Suggest an Edit for this Spec: GitHub Editor Test Suite: https://wpt.fyi/results/css/css-grid/ Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply. Abstract This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. Status of this document This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C standards and drafts index at https://www.w3.org/TR/. This document was published by the CSS Working Group as a Candidate Recommendation Draft using the Recommendation track. Publication as a Candidate Recommendation does not imply endorsement by W3C and its Members. A Candidate Recommendation Draft integrates changes from the previous Candidate Recommendation that the Working Group intends to include in a subsequent Candidate Recommendation Snapshot. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. Please send feedback by filing issues in GitHub (preferred), including the spec code “css-grid” in the title, like this: “[css-grid] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. This document is governed by the 03 November 2023 W3C Process Document. This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy. The following features are at-risk, and may be dropped during the CR period: application of grid placement to absolutely-positioned boxes “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. If you notice any inconsistencies between this Grid Layout Module and the Flexible Box Layout Module, please report them to the CSSWG, as this is likely an error. 1. Introduction This section is not normative. Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors. 1.1. Background and Motivation Application layout example requiring horizontal and vertical alignment. As websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout. By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counter-intuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen. The capabilities of grid layout address these problems. It provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application into the grid areas defined by the intersections of these columns and rows. The following examples illustrate the adaptive capabilities of grid layout, and how it allows a cleaner separation of content and style. 1.1.1. Adapting Layouts to Available Space Five grid items arranged according to content size and available space. Growth in the grid due to an increase in available space. Grid layout can be used to intelligently resize elements within a webpage. The adjacent figures represent a game with five major components in the layout: the game title, stats area, game board, score area, and control area. The author’s intent is to divide the space for the game such that: The stats area always appears immediately under the game title. The game board appears to the right of the stats and title. The top of the game title and the game board should always align. The bottom of the game board and bottom of the stats area align when the game has reached its minimum height. In all other cases the game board will stretch to take advantage of all the space available to it. The controls are centered under the game board. The top of the score area is aligned to the top of the controls area. The score area is beneath the stats area. The score area is aligned to the controls beneath the stats area. The following grid layout example shows how an author might achieve all the sizing, placement, and alignment rules declaratively. /** * Define the space for each grid item by declaring the grid * on the grid container. */ #grid { /** * Two columns: * 1. the first sized to content, * 2. the second receives the remaining space * (but is never smaller than the minimum size of the board * or the game controls, which occupy this column [Figure 4]) * * Three rows: * 3. the first sized to content, * 4. the middle row receives the remaining space * (but is never smaller than the minimum height * of the board or stats areas) * 5. the last sized to content. */ display: grid; grid-template-columns: /* 1 */ auto /* 2 */ 1fr; grid-template-rows: /* 3 */ auto /* 4 */ 1fr /* 5 */ auto; } /* Specify the position of each grid item using coordinates on * the 'grid-row' and 'grid-column' properties of each grid item. */ #title { grid-column: 1; grid-row: 1; } #score { grid-column: 1; grid-row: 3; } #stats { grid-column: 1; grid-row: 2; align-self: start; } #board { grid-column: 2; grid-row: 1 / span 2; } #controls { grid-column: 2; grid-row: 3; justify-self: center; }