Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" 
     <link href=",700,700i" rel="stylesheet">
     <title>Project 4 - Technical Documentation</title>
    <link rel="stylesheet" href="/styles/prj4TechnicalDocumentation.css">
    <link rel="stylesheet" href="" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <script src=""></script>

  <nav id="navbar">
    <header>CSS-GRID Documentation</header>
   <h2 id="contents">Table of Contents</h2>
   <ol class="toc">
    <li class="toc">
     <a class="nav-link" href="#The_Grid" rel="internal">The Grid</a>
     <a class="nav-link" href="#Abstract_Section" rel="internal">Abstract Section</a>
       <ol class="toc">
     <ol class="toc">
       <a class="nav-link" href="#The_Introduction" rel="internal">The Introduction</a>
       <ol class="toc">
        <li><a href="">1.1.1  Adapting Layouts to Available Space</a>
        <li><a href="">1.1.2  Source-Order Independence</a>
     <a class="nav-link" href="#The_Overview">The Overview</a>
     <ol class="toc">
      <li><a href="">2.1  Declaring the Grid</a>
      </li><li><a href="">2.2  Placing Items</a>
      </li><li><a href="">2.3  Sizing the Grid</a>
     <a class="nav-link" href="#The_Grid_Concepts">The Grid Concepts</a>
     <ol class="toc">
      <li><a href="">3.1  Grid Lines</a>
      </li><li><a href="">3.2  Grid Tracks and Cells</a>
      </li><li><a href="">3.3  Grid Areas</a>
    </li><li><a class="nav-link" href="#The_Order_Accessibility">The Order Accessibility</a>
     <a class="nav-link" href="#The_Grid_Containers">The Grid Containers</a>
     <ol class="toc">
      <li><a href="">5.1  Establishing Grid Containers: the <span class="css">grid and <span class="css">inline-grid <span class="property">display values</a>
      </li><li><a href="">5.2  Sizing Grid Containers</a>
      </li><li><a href="">5.3  Clamping Overly Large Grids</a>
     <a class="nav-link" href="#The_Grid_Items">The Grid Items</a>
     <ol class="toc">
      <li><a href="">6.1  Grid Item Display</a>
      </li><li><a href="">6.2  Grid Item Sizing</a>
      </li><li><a href="">6.3  Reordered Grid Items: the <span class="property">order property</a>
      </li><li><a href="">6.4  Grid Item Margins and Paddings</a>
      </li><li><a href="">6.5  Z-axis Ordering: the <span class="property">z-index property</a>
      </li><li><a href="">6.6  Automatic Minimum Size of Grid Items</a>
     <a href="">7  Defining the Grid</a>
     <ol class="toc">
      <li><a href="">7.1  The Explicit Grid</a>
       <a href="">7.2  Explicit Track Sizing: the <span class="property">grid-template-rows and <span class="property">grid-template-columns properties</a>
       <ol class="toc">
        <li><a href="">7.2.1  Named Grid Lines: the <span class="css">[<span class="production">&lt;custom-ident&gt;*] syntax</a>
         <a href="">7.2.2  Repeating Rows and Columns: the <span class="css">repeat() notation</a>
         <ol class="toc">
          <li><a href="">  Syntax of <span class="css">repeat()</a>
          </li><li><a href="">  Repeat-to-fill: <span class="css">auto-fill and <span class="css">auto-fit repetitions</a>
        </li><li><a href="">7.2.3  Flexible Lengths: the <span class="css">fr unit</a>
        </li><li><a href="">7.2.4  Resolved Values</a>
       <a href="">7.3  Named Areas: the <span class="property">grid-template-areas property</a>
       <ol class="toc">
        <li><a href="">7.3.1  Implicit Named Lines</a>
        </li><li><a href="">7.3.2  Implicit Named Areas</a>
      </li><li><a href="">7.4  Explicit Grid Shorthand: the <span class="property">grid-template property</a>
      </li><li><a href="">7.5  The Implicit Grid</a>
      </li><li><a href="">7.6  Implicit Track Sizing: the <span class="property">grid-auto-rows and <span class="property">grid-auto-columns properties</a>
      </li><li><a href="">7.7  <span>Automatic Placement: the <span class="property">grid-auto-flow property</a>
      </li><li><a href="">7.8  Grid Definition Shorthand: the <span class="property">grid property</a>
     <a href="">8  Placing Grid Items</a>
     <ol class="toc">
       <a href="">8.1  Common Patterns for Grid Placement</a>
       <ol class="toc">
        <li><a href="">8.1.1  Named Areas</a>
        </li><li><a href="">8.1.2  Numeric Indexes and Spans</a>
        </li><li><a href="">8.1.3  Named Lines and Spans</a>
        </li><li><a href="">8.1.4  Auto Placement</a>
      </li><li><a href="">8.2  Grid Item Placement vs. Source Order</a>
       <a href="">8.3  Line-based Placement: the <span class="property">grid-row-start, <span class="property">grid-column-start, <span class="property">grid-row-end, and <span class="property">grid-column-end properties</a>
       <ol class="toc">
        <li><a href="">8.3.1  Grid Placement Conflict Handling</a>
      </li><li><a href="">8.4  Placement Shorthands: the <span class="property">grid-column, <span class="property">grid-row, and <span class="property">grid-area properties</a>
      </li><li><a href="">8.5  Grid Item Placement Algorithm</a>
     <a href="">9  Absolute Positioning</a>
     <ol class="toc">
      <li><a href="">9.1  With a Grid Container as Containing Block</a>
      </li><li><a href="">9.2  With a Grid Container as Parent</a>
     <a href="">10  Alignment and Spacing</a>
     <ol class="toc">
      <li><a href="">10.1  Gutters: the <span class="property">row-gap, <span class="property">column-gap, and <span class="property">gap properties</a>
      </li><li><a href="">10.2  Aligning with <span>auto margins</a>
      </li><li><a href="">10.3  Row-axis Alignment: the <span class="property">justify-self and <span class="property">justify-items properties</a>
      </li><li><a href="">10.4  Column-axis Alignment: the <span class="property">align-self and <span class="property">align-items properties</a>
      </li><li><a href="">10.5  Aligning the Grid: the <span class="property">justify-content and <span class="property">align-content properties</a>
      </li><li><a href="">10.6  Grid Container Baselines</a>
     <a href="">11  Grid Sizing</a>
     <ol class="toc">
      <li><a href="">11.1  Grid Sizing Algorithm</a>
      </li><li><a href="">11.2  Track Sizing Terminology</a>
      </li><li><a href="">11.3  Track Sizing Algorithm</a>
      </li><li><a href="">11.4  Initialize Track Sizes</a>
       <a href="">11.5  Resolve Intrinsic Track Sizes</a>
       <ol class="toc">
        <li><a href="">11.5.1  Distributing Extra Space Across Spanned Tracks</a>
      </li><li><a href="">11.6  Maximize Tracks</a>
       <a href="">11.7  Expand Flexible Tracks</a>
       <ol class="toc">
        <li><a href="">11.7.1  Find the Size of an <span class="css">fr</a>
      </li><li><a href="">11.8  Stretch <span class="css">auto Tracks</a>
     <a href="">12  Fragmenting Grid Layout</a>
     <ol class="toc">
      <li><a href="">12.1  Sample Fragmentation Algorithm</a>
    </li><li><a href="">  Acknowledgements</a>
     <a href="">  Changes</a>
     <ol class="toc">
       <a href="">  Changes since the <span>29 September 2016 CR</a>
       <ol class="toc">
        <li><a href="">  Major Changes</a>
        </li><li><a href="">  Significant Adjustments and Fixes</a>
        </li><li><a href="">  Clarifications</a>
    </li><li><a href="">13 Privacy and Security Considerations</a>
     <a href="">  Conformance</a>
     <ol class="toc">
      <li><a href="">  Document conventions</a>
      </li><li><a href="">  Conformance classes</a>
       <a href="">  Requirements for Responsible Implementation of CSS</a>
       <ol class="toc">
        <li><a href="">  Partial Implementations</a>
        </li><li><a href="">  Implementations of Unstable and Proprietary Features</a>
        </li><li><a href="">  Implementations of CR-level Features</a>
      </li><li><a href="">  CR exit criteria</a>
     <a href=""> Index</a>
     <ol class="toc">
      <li><a href=""> Terms defined by this specification</a>
      </li><li><a href=""> Terms defined by reference</a>
     <a href=""> References</a>
     <ol class="toc">
      <li><a href=""> Normative References</a>
      </li><li><a href=""> Informative References</a>
    </li><li><a href=""> Property Index</a>
    <li><a href=""> Issues Index</a>
<main id="main-doc">
  <!-- shkhdfkhdkhdjkghkjdhgkhfgkjfhgkfhdgkfdhgkfhdkkjghkjfdhgkjfd -->
 <section class="main-section" id="The_Grid">
  <header>The Grid</header>
  <div class="head">
      <a class="logo" href="">
        <img src="" alt="W3C" height="48" widht="72"> 
    <h1>CSS Grid Layout Module Level 1</h1>
      <h2>W3C Candidate Recommendation, 14 December 2017</h2>
        <dt>This version:</dt>
             <a href=""></a>
        <dt>Latest published version:</dt>
            <a href=""></a>
        <dt>Editor's Draft:
      <dd><a href=""></a>

<dt>Previous Versions:
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dd><a href="" rel="prev"></a>
<dt>Test Suite:
<dd><a href=""></a>
<dt>Issue Tracking:
<dd><a href="">Disposition of Comments</a>
<dd><a href="#issues-index">Inline In Spec</a>
<dd><a href="">GitHub Issues</a>
<dd><a href="">Tab Atkins Jr.</a> (<span>Google</span>)
<dd><a href="">Elika J. Etemad / fantasai</a> (<span>Invited Expert</span>)
<dd ><a href="">Rossen Atanassov</a> (<span>Microsoft</span>)
<dt>Former Editors:
<dd><a href="">Alex Mogilevsky</a> (<span>Microsoft Corporation</span>)
<dd><a href="">Phil Cupp</a> (<span>Microsoft Corporation</span>)

<p class="copyright">
  <a href="">Copyright</a> © 2017 
  <a href=""><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=""><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=""><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="">Keio</a>, <a href="">Beihang</a>). W3C <a href="">liability</a>, <a href="">trademark</a> and <a href="">permissive document license</a> rules apply.
<section class="main-section" id="Abstract_Section">
<header>Abstract Section</header>
<h2 id="abstract">Abstract</h2>
  <p>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.</p>
  <a href="">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.
  <h2 id="status">Status of this document</h2>
  <p>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at

This document was produced by the CSS Working Group as a Candidate Recommendation. This document is intended to become a W3C Recommendation. This document will remain a Candidate Recommendation at least until 1 February 2018 in order to ensure the opportunity for wide review.

GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-grid” in the title, preferably like this: “[css-grid] …summary of comment…”. All issues and comments are archived, and there is also a historical archive.

A preliminary implementation report is available.

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. 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.

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.

This document is governed by the 1 March 2017 W3C Process Document.

For changes since the last draft, see the Changes section.

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.</p>
  <!--  kklk;lk;lk;k;k;k;kl; -->
  <p class="issue" id="issue1">
   If you notice any inconsistencies between this Grid Layout Module and the <a href="">Flexible Box Layout Module</a>, please report them to the CSSWG, as this is likely an error.
<section class="main-section" id="The_Introduction">
<header>The Introduction</header>
  <h2 id="intro">1. Introduction</h2>
<p><em>This section is not normative.</em></p>
<p>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 <a href="">Flexible Box Layout</a>, which is single-axis–oriented,
  Grid Layout is optimized for 2-dimensional layouts:
  those in which alignment of content is desired in both dimensions.</p>
     <img alt="An example of flex layout:
         two rows of items,
         the first being three items a third of the space each,
         and the second being five items, a fifth of the space each.
         There is therefore alignment along the row axis, but not along the column axis." src="">
    <figcaption>Figure 1. Exemplary Flex Layout Example</figcaption>
     <img alt="An example of grid layout:
         two rows of items,
         the first being four items—the last of which spans both rows,
         and the second being two items—the first of which spans the first two columns— plus the spanned item from the first row." src="">
    <figcaption>Figure 2. Exemplary Flex Layout Example</figcaption>
   <p>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 <a href="">media queries</a> 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.</p>
  <p>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.</p>
  <h3 id="background">1.1. Background and Motivation</h3>
     <img alt="Image: Application layout example requiring horizontal and vertical alignment." src="">
    <figcaption>Figure 3. Application layout example requiring horizontal and vertical alignment.</figcaption>
   <p>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.</p>
  <p>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 <a data-link-type="dfn" href="#grid-area" id="ref-for-grid-area">grid areas</a> 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.</p>
  <h4 id="adapting-to-available-space">Adapting Layouts to Available Space</h4>
     <img alt="Let us consider the layout of a game in two columns and three rows: the game title in the top left corner, the menu below it, and the score in the bottom left with the game board occupying the top and middle cells on the right followed by game controls filling the bottom left. The left column is sized to exactly fit its contents (the game title, menu items, and score), with the right column filling the remaining space." src="">
    <figcaption>Figure 4. Five grid items arranged according to content size and available space.</figcaption>
     <img alt="As more space becomes available in larger screens, the middle row / right column are allowed to expand to fill that space." src="">
    <figcaption>Figure 5. Growth in the grid due to an increase in available space.</figcaption>
   <p>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:</p>
    <li> The stats area always appears immediately under the game title.
    </li><li> The game board appears to the right of the stats and title.
    </li><li> The top of the game title and the game board should always align.
    </li><li> 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.
    </li><li> The controls are centered under the game board.
    </li><li> The top of the score area is aligned to the top of the controls area.
    </li><li> The score area is beneath the stats area.
    </li><li> The score area is aligned to the controls beneath the stats area.
   <h4 id="source-independence">Source-Order Independence</h4>
     <img alt="Image: An arrangement suitable for portrait orientation." src="">
    <figcaption>Figure 6. An arrangement suitable for “portrait” orientation.</figcaption>
   <figure class="sidefigure">
     <img alt="Image: An arrangement suitable for landscape orientation." src="">
    <figcaption>Figure 7. An arrangement suitable for “landscape“ orientation.</figcaption>
   <p>Continuing the prior example,
  the author also wants the game to adapt to different devices.
  Also, the game should optimize the placement of the components when viewed either in portrait or landscape orientation (Figures 6 and 7).
  By combining grid layout with media queries,
  the author is able to use the same semantic markup,
  but rearrange the layout of elements independent of their source order,
  to achieve the desired layout in both orientations.</p>
  <section class="main-section" id="The_Overview">
   <header>The Overview</header>
     <h2 class="heading settled" data-level="2" id="overview"><span class="secno">2. </span><span class="content"> Overview</span><a class="self-link" href=""></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>Grid Layout controls the layout of its content
  through the use of a <a data-link-type="dfn" href="" id="ref-for-grid">grid</a>:
  an intersecting set of horizontal and vertical lines
  which create a sizing and positioning coordinate system
  for the <a data-link-type="dfn" href="" id="ref-for-grid-container①">grid container</a>’s contents.
  Grid Layout features</p>
    <li> fixed, flexible, and content-based <a href="">track sizing functions</a>
    </li><li> <a href="">explicit item placement</a> via forwards (positive) and backwards (negative) numerical grid coordinates,
      named grid lines, and named grid areas;
      automatic item placement into empty areas, including <a href="">reordering with <span class="css">order</span></a>
    </li><li> space-sensitive track repetition
      automatic addition of rows or columns to accommodate additional content
    </li><li> control over alignment and spacing with <a href="">margins</a>, <a data-link-type="dfn" href="" id="ref-for-gutter">gutters</a>, and the <a href="">alignment properties</a>
    </li><li> the ability to overlap content and <a href="">control layering with <span class="css">z-index</span></a>
   <p><a data-link-type="dfn" href="" id="ref-for-grid-container②">Grid containers</a> can be nested or mixed with <a data-link-type="dfn" href="" id="ref-for-flex-container">flex containers</a> as necessary to create more complex layouts.</p>
   <h3 class="heading settled" data-level="2.1" id="overview-grid"><span class="secno">2.1. </span><span class="content"> Declaring the Grid</span><a class="self-link" href=""></a></h3>
   <p>The <a data-link-type="dfn" href="" id="ref-for-grid-track">tracks</a> (<a data-link-type="dfn" href="" id="ref-for-grid-row">rows</a> and <a data-link-type="dfn" href="" id="ref-for-grid-column">columns</a>) of the <a data-link-type="dfn" href="" id="ref-for-grid①">grid</a> are declared and sized
  either explicitly through the <a data-link-type="dfn" href="" id="ref-for-explicit-grid">explicit grid</a> properties
  or are implicitly created when items are placed outside the <a data-link-type="dfn" href="" id="ref-for-explicit-grid①">explicit grid</a>.
  The <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid">grid</a> shorthand and its sub-properties define the parameters
  of the grid. <a href="">§7 Defining the Grid</a></p>
   <div class="example" id="example-93c0f003">
    <a class="self-link" href=""></a> Below are some examples of grid declarations:
       The following declares a grid with four named areas: <code>H</code>, <code>A</code>, <code>B</code>,
        and <code>F</code>.
        The first column is sized to fit its contents (<a class="css" data-link-type="maybe" href="" id="ref-for-valdef-grid-template-columns-auto">auto</a>),
        and the second column takes up the remaining space (<a class="css" data-link-type="value" href="" id="ref-for-valdef-flex-fr">1fr</a>).
        Rows default to <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-grid-template-columns-auto①">auto</a> (content-based) sizing;
        the last row is given a fixed size of <span class="css">30px</span>.
<pre>main {
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
       The following declares a grid with as many rows of at least <span class="css">5em</span> as will fit in the height of the grid container (<span class="css">100vh</span>).
        The grid has no explicit columns;
        instead columns are added as content is added,
        the resulting column widths are equalized (<a class="css" data-link-type="value" href="" id="ref-for-valdef-flex-fr①">1fr</a>).
        Since content overflowing to the right won’t print,
        an alternate layout for printing adds rows instead.
<pre>main {
  grid: repeat(auto-fill, 5em) / auto-flow 1fr;
  height: 100vh;
       The following declares a grid with 5 evenly-sized columns
        and three rows,
        with the middle row taking up all remaining space
        (and at least enough to fit its contents).
<pre>main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
   <h3 class="heading settled" data-level="2.2" id="overview-placement"><span class="secno">2.2. </span><span class="content"> Placing Items</span><a class="self-link" href=""></a></h3>
   <p>The contents of the <a data-link-type="dfn" href="" id="ref-for-grid-container③">grid container</a> are organized into individual <a data-link-type="dfn" href="" id="ref-for-grid-item⑥">grid items</a> (analogous to <a data-link-type="dfn" href="" id="ref-for-flex-item">flex items</a>),
  which are then assigned to predefined <a data-link-type="dfn" href="" id="ref-for-grid-area①">areas</a> in the <a data-link-type="dfn" href="" id="ref-for-grid②">grid</a>.
  They can be explicitly placed using coordinates through the <a data-link-type="dfn" href="" id="ref-for-grid-placement-property">grid-placement properties</a> or implicitly placed into empty areas using <a href="" id="ref-for-auto-placement">auto-placement</a>. <a href="">§8 Placing Grid Items</a></p>
   <div class="example" id="example-3f779473">
    <a class="self-link" href=""></a> Below are some examples of grid placement declarations
    using the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-area">grid-area</a> shorthand:
<pre>grid-area: a;          /* Place into named grid area “a”     */
grid-area: auto;       /* Auto-place into next empty area    */
grid-area: 2 / 4;      /* Place into row 2, column 4         */
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
grid-area: header-start / sidebar-start / footer-end / sidebar-start;
                       /* Place using named lines            */
    <p>These are equivalent to the following <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-row">grid-row</a> + <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-column">grid-column</a> declarations:</p>
<pre>grid-row: a;                         grid-column: a;
grid-row: auto;                      grid-column: auto;
grid-row: 2;                         grid-column: 4;
grid-row: 1 / -1;                    grid-column: 3;
grid-row: header-start / footer-end; grid-column: sidebar-start / footer-end;
    <p>They can further be decomposed into the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-row-start">grid-row-start</a>/<a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-row-end">grid-row-end</a>/<a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-column-start">grid-column-start</a>/<a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-column-end">grid-column-end</a> longhands, e.g.</p>
<pre>grid-area: a;
/* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */

grid-area: 1 / 3 / -1;
/* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */
   <h3 class="heading settled" data-level="2.3" id="overview-sizing"><span class="secno">2.3. </span><span class="content"> Sizing the Grid</span><a class="self-link" href=""></a></h3>
   <p>Once the <a data-link-type="dfn" href="" id="ref-for-grid-item⑦">grid items</a> have been <a href="">placed</a>,
  the sizes of the <a data-link-type="dfn" href="" id="ref-for-grid-track①">grid tracks</a> (rows and columns) are calculated,
  accounting for the sizes of their contents and/or available space as specified in the grid definition.</p>
   <p>The resulting sized grid is <a href="">aligned</a> within the <a data-link-type="dfn" href="" id="ref-for-grid-container④">grid container</a> according to the <a data-link-type="dfn" href="" id="ref-for-grid-container⑤">grid container</a>’s <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-align-content">align-content</a> and <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-justify-content">justify-content</a> properties. <a href="">§10 Alignment and Spacing</a></p>
   <div class="example" id="example-6afa444a">
    <a class="self-link" href=""></a> The following example justifies all columns
    by distributing any extra space among them,
    and centers the grid in the <a data-link-type="dfn" href="" id="ref-for-grid-container⑥">grid container</a> when it is smaller than 100vh.
<pre>main {
  grid: auto-flow 1fr / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
   <p>Finally each <a data-link-type="dfn" href="" id="ref-for-grid-item⑧">grid item</a> is sized and aligned within its assigned <a data-link-type="dfn" href="" id="ref-for-grid-area②">grid area</a>,
  as specified by its own <a href="">sizing</a> <a data-link-type="biblio" href="">[CSS21]</a> and <a data-link-type="dfn" href="" id="ref-for-box-alignment-properties">alignment properties</a> <a data-link-type="biblio" href="">[CSS-ALIGN-3]</a>.</p>
  <section class="main-section" id="The_Grid_Concepts">
   <header>The Grid Concepts</header> 
   <h2 class="heading settled" data-level="3" id="grid-concepts"><span class="secno">3. </span><span class="content"> Grid Layout Concepts and Terminology</span><a class="self-link" href=""></a></h2>
   <p>In <dfn data-dfn-type="dfn" data-export="" id="grid-layout">grid layout<a class="self-link" href=""></a></dfn>,
  the content of a <a data-link-type="dfn" href="" id="ref-for-grid-container⑦">grid container</a> is laid out
  by positioning and aligning it into a <a data-link-type="dfn" href="" id="ref-for-grid③">grid</a>.
  The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="grid">grid</dfn> is an intersecting set of horizontal and vertical <a data-link-type="dfn" href="" id="ref-for-grid-line">grid lines</a> that divides the <a data-link-type="dfn" href="" id="ref-for-grid-container⑧">grid container</a>’s space into <a data-link-type="dfn" href="" id="ref-for-grid-area③">grid areas</a>,
  into which <a data-link-type="dfn" href="" id="ref-for-grid-item⑨">grid items</a> (representing the <a data-link-type="dfn" href="" id="ref-for-grid-container⑨">grid container</a>’s content) can be placed.
  There are two sets of <a data-link-type="dfn" href="" id="ref-for-grid-line①">grid lines</a>:
  one set defining <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" data-local-lt="column" data-lt="grid column" id="grid-column">columns</dfn> that run along the <a href="">block axis</a> (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="column-axis">column axis</dfn>),
  and an orthogonal set defining <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" data-local-lt="row" data-lt="grid row" id="grid-row">rows</dfn> along the <a href="">inline axis</a> (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="row-axis">row axis</dfn>). <a data-link-type="biblio" href="">[CSS3-WRITING-MODES]</a></p>
     <img alt="Image: Grid Lines." class="figure" src="./CSS Grid Layout Module Level 1_files/grid-lines.png">
    <figcaption>Grid lines: Three in the block axis and four in the inline axis.</figcaption>
   <p class="note" role="note"><span>Note:</span> The “column axis” term as used here was chosen to match the <a data-link-type="dfn" href="" id="ref-for-block-axis">block axis</a> because this matches the visual orientation of the column boxes themselves
  and matches the direction that a column grows as more items are added to it.
  As a result, it does not match the axis in which new columns are added
  or in which their track size is measured,
  which is the <a data-link-type="dfn" href="" id="ref-for-inline-axis">inline</a> or <a data-link-type="dfn" href="" id="ref-for-row-axis">row axis</a> The opposite logic, of course, applies to the “row axis”.</p>
   <h3 class="heading settled" data-level="3.1" id="grid-line-concept"><span class="secno">3.1. </span><span class="content"> Grid Lines</span><a class="self-link" href=""></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" data-lt="grid line|grid row line|grid column line" id="grid-line">Grid lines</dfn> are the horizontal and vertical dividing lines of the <a data-link-type="dfn" href="" id="ref-for-grid④">grid</a>.
  A <a data-link-type="dfn" href="" id="ref-for-grid-line②">grid line</a> exists on either side of a column or row.
  They can be referred to by numerical index,
  or by an author-specified name.
  A <a data-link-type="dfn" href="" id="ref-for-grid-item①⓪">grid item</a> references the <a data-link-type="dfn" href="" id="ref-for-grid-line③">grid lines</a> to determine its position within the <a data-link-type="dfn" href="" id="ref-for-grid⑤">grid</a> using the <a href="">grid-placement properties</a>.</p>
   <div class="example" id="example-6e7cd811">
    <a class="self-link" href=""></a> The following two examples both create three column <a data-link-type="dfn" href="" id="ref-for-grid-line④">grid lines</a> and four row <a data-link-type="dfn" href="" id="ref-for-grid-line⑤">grid lines</a>.
    <p>This first example demonstrates how an author would position a <a data-link-type="dfn" href="" id="ref-for-grid-item①①">grid item</a> using <a data-link-type="dfn" href="" id="ref-for-grid-line⑥">grid line</a> numbers:</p>
<pre class="lang-css highlight"><span class="nt">#grid </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> grid<span class="p">;</span>
  <span class="k">grid-template-columns</span><span class="p">:</span> <span class="m">150</span><span class="l">px</span> <span class="m">1</span><span class="l">fr</span><span class="p">;</span>
  <span class="k">grid-template-rows</span><span class="p">:</span> <span class="m">50</span><span class="l">px</span> <span class="m">1</span><span class="l">fr</span> <span class="m">50</span><span class="l">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">#item1 </span><span class="p">{</span> <span class="k">grid-column</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
         <span class="k">grid-row-start</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="k">grid-row-end</span><span class="p">:</span> <span class="m">4</span><span class="p">;</span> <span class="p">}</span>
    <p>This second example uses explicitly named <a data-link-type="dfn" href="" id="ref-for-grid-line⑦">grid lines</a>:</p>
<pre class="lang-css highlight"><span class="c">/* equivalent layout to the prior example, but using named lines */</span>
<span class="nt">#grid </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> grid<span class="p">;</span>
  <span class="k">grid-template-columns</span><span class="p">:</span> <span class="m">150</span><span class="l">px</span> [item1-start] 1fr [item1-end];
  grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];

#item1 {
  grid-column: item1-start / item1-end;
  grid-row: item1-start / item1-end;
   <h3 class="heading settled" data-level="3.2" id="grid-track-concept"><span class="secno">3.2. </span><span class="content"> Grid Tracks and Cells</span><a class="self-link" href=""></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" data-local-lt="track" id="grid-track">Grid track</dfn> is a generic term for a <a data-link-type="dfn" href="" id="ref-for-grid-column①">grid column</a> or <a data-link-type="dfn" href="" id="ref-for-grid-row①">grid row</a>—in
  other words, it is the space between two adjacent <a data-link-type="dfn" href="" id="ref-for-grid-line⑧">grid lines</a>.
  Each <a data-link-type="dfn" href="" id="ref-for-grid-track②">grid track</a> is assigned a sizing function,
  which controls how wide or tall the column or row may grow,
  and thus how far apart its bounding <a data-link-type="dfn" href="" id="ref-for-grid-line⑨">grid lines</a> are.
  Adjacent <a data-link-type="dfn" href="" id="ref-for-grid-track③">grid tracks</a> can be separated by <a href="">gutters</a> but are otherwise packed tightly.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="grid-cell">grid cell</dfn> is the intersection of a grid row and a grid column.
  It is the smallest unit of the grid that can be referenced when positioning <a data-link-type="dfn" href="" id="ref-for-grid-item①②">grid items</a>.</p>
   <div class="example" id="example-c9203348">
    <a class="self-link" href=""></a> In the following example there are two columns and three rows.
    The first column is fixed at 150px.
    The second column uses flexible sizing, which is a function of the unassigned space in the grid,
    and thus will vary as the width of the <a data-link-type="dfn" href="" id="ref-for-grid-container①⓪">grid container</a> changes.
    If the used width of the <a data-link-type="dfn" href="" id="ref-for-grid-container①①">grid container</a> is 200px, then the second column is 50px wide.
    If the used width of the <a data-link-type="dfn" href="" id="ref-for-grid-container①②">grid container</a> is 100px, then the second column is 0px
    and any content positioned in the column will overflow the <a data-link-type="dfn" href="" id="ref-for-grid-container①③">grid container</a>.
<pre>#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* two columns */
  grid-template-rows: 50px 1fr 50px; /* three rows  */
   <h3 class="heading settled" data-level="3.3" id="grid-area-concept"><span class="secno">3.3. </span><span class="content"> Grid Areas</span><a class="self-link" href=""></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="grid-area">grid area</dfn> is the logical space used to lay out one or more <a data-link-type="dfn" href="" id="ref-for-grid-item①③">grid items</a>.
  A <a data-link-type="dfn" href="" id="ref-for-grid-area④">grid area</a> consists of one or more adjacent <a data-link-type="dfn" href="" id="ref-for-grid-cell">grid cells</a>.
  It is bound by four <a data-link-type="dfn" href="" id="ref-for-grid-line①⓪">grid lines</a>, one on each side of the <a data-link-type="dfn" href="" id="ref-for-grid-area⑤">grid area</a>,
  and participates in the sizing of the <a data-link-type="dfn" href="" id="ref-for-grid-track④">grid tracks</a> it intersects.
  A <a data-link-type="dfn" href="" id="ref-for-grid-area⑥">grid area</a> can be named explicitly using the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-grid-template-areas">grid-template-areas</a> property of the <a data-link-type="dfn" href="" id="ref-for-grid-container①④">grid container</a>,
  or referenced implicitly by its bounding <a data-link-type="dfn" href="" id="ref-for-grid-line①①">grid lines</a>.
  A <a data-link-type="dfn" href="" id="ref-for-grid-item①④">grid item</a> is assigned to a <a data-link-type="dfn" href="" id="ref-for-grid-area⑦">grid area</a> using the <a href="">grid-placement properties</a>.</p>
   <div class="example" id="example-510e72f7">
    <a class="self-link" href=""></a>
<pre>/* using the template syntax */
#grid  {
display: grid;
grid-template-areas: ". a"
                     "b a"
                     ". a";
grid-template-columns: 150px 1fr;
grid-template-rows: 50px 1fr 50px;

#item1 { grid-area: a }
#item2 { grid-area: b }
#item3 { grid-area: b }

/* Align items 2 and 3 at different points in the grid area "b".  */
/* By default, grid items are stretched to fit their grid area    */
/* and these items would layer one over the other. */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }
   <p>A <a data-link-type="dfn" href="" id="ref-for-grid-item①⑤">grid item</a>’s <a data-link-type="dfn" href="" id="ref-for-grid-area⑧">grid area</a> forms the containing block into which it is laid out. <a data-link-type="dfn" href="" id="ref-for-grid-item①⑥">Grid items</a> placed into the same <a data-link-type="dfn" href="" id="ref-for-grid-area⑨">grid area</a> do not directly affect each other’s layout.
  Indirectly, however, a <a data-link-type="dfn" href="" id="ref-for-grid-item①⑦">grid item</a> occupying a <a data-link-type="dfn" href="" id="ref-for-grid-track⑤">grid track</a> with an <a data-link-type="dfn" href="" id="ref-for-intrinsic-sizing-function">intrinsic sizing function</a> can affect the size of that track (and thus the positions of its bounding <a data-link-type="dfn" href="" id="ref-for-grid-line①②">grid lines</a>),
  which in turn can affect the position or size of another <a data-link-type="dfn" href="" id="ref-for-grid-item①⑧">grid item</a>.</p>
  <section class="main-section" id="The_Order_Accessibility">
  <header>The Order Accessibility</header> 
   <h2 class="heading settled" data-level="4" id="order-accessibility"><span class="secno">4. </span><span class="content"> Reordering and Accessibility</span><a class="self-link" href=""></a></h2>
   <p>Grid layout gives authors great powers of rearrangement over the document.
  However, these are not a substitute for correct ordering of the document source.
  The <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order">order</a> property and <a data-link-type="dfn" href="" id="ref-for-grid-placement">grid placement</a> <em>do not</em> affect ordering in non-visual media
  (such as <a href="">speech</a>).
  Likewise, rearranging grid items visually does not affect
  the default traversal order of sequential navigation modes
  (such as cycling through links, see e.g. <a href=""><code>tabindex</code></a> <a data-link-type="biblio" href="">[HTML5]</a>).</p>
   <p><strong class="advisement"> Authors <em>must</em> use <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order①">order</a> and the <a data-link-type="dfn" href="" id="ref-for-grid-placement-property①">grid-placement properties</a> only for visual, not logical, reordering of content.
  Style sheets that use these features to perform logical reordering are non-conforming.</strong></p>
   <p class="note" role="note"><span>Note:</span> This is so that non-visual media and non-CSS UAs,
  which typically present content linearly,
  can rely on a logical source order,
  while grid layout’s placement and ordering features are used to tailor the visual arrangement.
  (Since visual perception is two-dimensional and non-linear,
  the desired visual order is not always equivalent to the desired reading order.)</p>
   <div class="example" id="example-09642049">
    <a class="self-link" href=""></a> Many web pages have a similar shape in the markup,
    with a header on top,
    a footer on bottom,
    and then a content area and one or two additional columns in the middle.
    it’s desirable that the content come first in the page’s source code,
    before the additional columns.
    However, this makes many common designs,
    such as simply having the additional columns on the left and the content area on the right,
    difficult to achieve.
    This has been addressed in many ways over the years,
    often going by the name "Holy Grail Layout" when there are two additional columns.
    Grid Layout makes this example trivial.
    For example, take the following sketch of a page’s code and desired layout:
    <div class="code-and-figure">
<pre class="lang-markup highlight"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">aside</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">aside</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
     <div><img alt="In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left." height="360" src="./CSS Grid Layout Module Level 1_files/grid-order-page.svg" width="400"></div>
    <p>This layout can be easily achieved with grid layout:</p>
<pre class="lang-css highlight"><span class="nt">main </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> grid<span class="p">;</span>
       <span class="k">grid</span><span class="p">:</span> <span class="s">"h h h"</span>
             <span class="s">"a b c"</span>
             <span class="s">"f f f"</span><span class="p">;</span>
       <span class="k">grid-template-columns</span><span class="p">:</span> auto <span class="m">1</span><span class="l">fr</span> <span class="m">20</span><span class="l">%</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">article </span><span class="p">{</span> <span class="k">grid-area</span><span class="p">:</span> b<span class="p">;</span> <span class="k">min-width</span><span class="p">:</span> <span class="m">12</span><span class="l">em</span><span class="p">;</span>     <span class="p">}</span>
<span class="nt">nav     </span><span class="p">{</span> <span class="k">grid-area</span><span class="p">:</span> a<span class="p">;</span> <span class="c">/* auto min-width */</span> <span class="p">}</span>
<span class="nt">aside   </span><span class="p">{</span> <span class="k">grid-area</span><span class="p">:</span> c<span class="p">;</span> <span class="k">min-width</span><span class="p">:</span> <span class="m">12</span><span class="l">em</span><span class="p">;</span>     <span class="p">}</span>
    <p>As an added bonus,
    the columns will all be <a class="css" data-link-type="value" href="" id="ref-for-valdef-align-self-stretch">equal-height</a> by default,
    and the main content will be as wide as necessary to fill the screen.
    this can then be combined with media queries to switch to an all-vertical layout on narrow screens:</p>
<pre class="lang-css highlight"><span class="n">@media</span> all and <span class="p">(</span>max-width<span class="nt">: 60em) </span><span class="p">{</span>
  <span class="c">/* Too narrow to support three columns */</span>
  main { display: block; }
   <p>In order to preserve the author’s intended ordering in all presentation modes,
  authoring tools—including WYSIWYG editors as well as Web-based authoring aids—<wbr>must reorder the underlying document source
  and not use <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order②">order</a> or <a data-link-type="dfn" href="" id="ref-for-grid-placement-property②">grid-placement properties</a> to perform reordering
  unless the author has explicitly indicated that the underlying
  document order (which determines speech and navigation order) should be <em>out-of-sync</em> with the visual order.</p>
   <div class="example" id="example-a3f89410">
    <a class="self-link" href=""></a> For example, a tool might offer both drag-and-drop arrangement of grid items
    as well as handling of media queries for alternate layouts per screen size range.
    <p>Since most of the time, reordering should affect all screen ranges
    as well as navigation and speech order,
    the tool would match the resulting drag-and-drop visual arrangement
    by simultaneously reordering the DOM layer.
    In some cases, however, the author may want different visual arrangements per screen size.
    The tool could offer this functionality
    by using the <a data-link-type="dfn" href="" id="ref-for-grid-placement-property③">grid-placement properties</a> together with media queries,
    but also tie the smallest screen size’s arrangement to the underlying DOM order
    (since this is most likely to be a logical linear presentation order)
    while using <a data-link-type="dfn" href="" id="ref-for-grid-placement-property④">grid-placement properties</a> to rearrange the visual presentation in other size ranges.</p>
    <p>This tool would be conformant, whereas a tool that only ever used
    the <a data-link-type="dfn" href="" id="ref-for-grid-placement-property⑤">grid-placement properties</a> to handle drag-and-drop grid rearrangement
    (however convenient it might be to implement it that way)
    would be non-conformant.</p>
   <section class="main-section" id="The_Grid_Containers">
   <header>The Grid Containers</header> 
   <h2 class="heading settled" data-level="5" id="grid-model"><span class="secno">5. </span><span class="content"> Grid Containers</span><a class="self-link" href=""></a></h2>
   <h3 class="heading settled" data-level="5.1" id="grid-containers"><span class="secno">5.1. </span><span class="content"> Establishing Grid Containers: the <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-display-grid">grid</a> and <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-display-inline-grid">inline-grid</a> <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display">display</a> values</span><a class="self-link" href=""></a></h3>
   <table class="def propdef partial" data-link-for-hint="display">
      </th><td><a class="css" data-link-type="property" href="" id="ref-for-propdef-display①">display</a>
     </td></tr><tr class="value">
      <th><a href="">New values:</a>
      </th><td class="prod">grid <a data-link-type="grammar" href="" id="ref-for-comb-one">|</a> inline-grid
    <dt><dfn class="dfn-paneled css" data-dfn-for="display" data-dfn-type="value" data-export="" id="valdef-display-grid">grid</dfn>
    </dt><dd> This value causes an element to generate a block-level <a data-link-type="dfn" href="" id="ref-for-grid-container①⑤">grid container</a> box.
    </dd><dt><dfn class="dfn-paneled css" data-dfn-for="display" data-dfn-type="value" data-export="" id="valdef-display-inline-grid">inline-grid</dfn>
    </dt><dd> This value causes an element to generate an inline-level <a data-link-type="dfn" href="" id="ref-for-grid-container①⑥">grid container</a> box.
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="grid-container">grid container</dfn> establishes a new <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="grid-formatting-context">grid formatting context</dfn> for its contents.
  This is the same as establishing a block formatting context,
  except that grid layout is used instead of block layout:
  floats do not intrude into the grid container,
  and the grid container’s margins do not collapse with the margins of its contents.
  The contents of a <a data-link-type="dfn" href="" id="ref-for-grid-container①⑦">grid container</a> are laid out into a <a data-link-type="dfn" href="" id="ref-for-grid⑥">grid</a>,
  with <a data-link-type="dfn" href="" id="ref-for-grid-line①③">grid lines</a> forming the boundaries of each <a data-link-type="dfn" href="" id="ref-for-grid-item①⑨">grid items</a>’ containing block.
  The <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-overflow">overflow</a> property applies to <a data-link-type="dfn" href="" id="ref-for-grid-container①⑧">grid containers</a>.</p>
   <p>Grid containers are not block containers,
  and so some properties that were designed with the assumption of block layout
  don’t apply in the context of grid layout.
  In particular:</p>
    <li> <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-float">float</a> and <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-clear">clear</a> have no effect on a <a data-link-type="dfn" href="" id="ref-for-grid-item②⓪">grid item</a>.
      However, the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-float①">float</a> property still affects the computed value of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display②">display</a> on children of a grid container,
      as this occurs <em>before</em> <a data-link-type="dfn" href="" id="ref-for-grid-item②①">grid items</a> are determined.
    </li><li> <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-vertical-align">vertical-align</a> has no effect on a grid item.
    </li><li> the <a class="css" data-link-type="maybe" href="" id="ref-for-selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="" id="ref-for-selectordef-first-letter">::first-letter</a> pseudo-elements do not apply to <a data-link-type="dfn" href="" id="ref-for-grid-container①⑨">grid containers</a>,
      and <a data-link-type="dfn" href="" id="ref-for-grid-container②⓪">grid containers</a> do not contribute a first formatted line or first letter to their ancestors.
   <p>If an element’s specified <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display③">display</a> is <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-display-inline-grid①">inline-grid</a> and the element is floated or absolutely positioned,
  the computed value of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display④">display</a> is <a class="css" data-link-type="value" href="" id="ref-for-valdef-display-grid①">grid</a>.
  The table in <a href="">CSS 2.1 Chapter 9.7</a> is thus amended
  to contain an additional row,
  with <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-display-inline-grid②">inline-grid</a> in the "Specified Value" column
  and <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-display-grid②">grid</a> in the "Computed Value" column.</p>
   <h3 class="heading settled" data-level="5.2" id="intrinsic-sizes"><span class="secno">5.2. </span><span class="content"> Sizing Grid Containers</span><a class="self-link" href=""></a></h3>
   <p>Note see <a data-link-type="biblio" href="">[CSS3-SIZING]</a> for a definition of the terms in this section.</p>
   <p>A <a data-link-type="dfn" href="" id="ref-for-grid-container②①">grid container</a> is sized
  using the rules of the formatting context in which it participates:</p>
    <li> As a <a data-link-type="dfn" href="" id="ref-for-block-level">block-level</a> box in a <a data-link-type="dfn" href="" id="ref-for-block-formatting-context">block formatting context</a>,
      it is sized like a <a data-link-type="dfn" href="" id="ref-for-block-box">block box</a> that establishes a formatting context,
      with an <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-grid-template-columns-auto②">auto</a> <a data-link-type="dfn" href="" id="ref-for-inline-size">inline size</a> calculated as for non-replaced block boxes.
    </li><li> As an inline-level box in an <a data-link-type="dfn" href="" id="ref-for-inline-formatting-context">inline formatting context</a>,
      it is sized as an atomic inline-level box (such as an inline-block).
   <p>In both inline and block formatting contexts,
  the <a data-link-type="dfn" href="" id="ref-for-grid-container②②">grid container</a>’s <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-grid-template-columns-auto③">auto</a> <a data-link-type="dfn" href="" id="ref-for-block-size">block size</a> is its max-content size.</p>
   <p><span class="note">The block layout spec should probably define this,
  but it isn’t written yet.</span></p>
   <p>The <a data-link-type="dfn" href="" id="ref-for-max-content">max-content size</a> (<a data-link-type="dfn" href="" id="ref-for-min-content">min-content size</a>) of a <a data-link-type="dfn" href="" id="ref-for-grid-container②③">grid container</a> is
  the sum of the <a data-link-type="dfn" href="" id="ref-for-grid-container②④">grid container’s</a> track sizes (including gutters)
  in the appropriate axis,
  when the grid is sized under a <a data-link-type="dfn" href="" id="ref-for-max-content-constraint">max-content constraint</a> (<a data-link-type="dfn" href="" id="ref-for-min-content-constraint">min-content constraint</a>).</p>
   <h3 class="heading settled" data-level="5.3" id="overlarge-grids"><span class="secno">5.3. </span><span class="content"> Clamping Overly Large Grids</span><a class="self-link" href=""></a></h3>
   <p>Since memory is limited,
  UAs may clamp the possible size of the <a data-link-type="dfn" href="" id="ref-for-grid⑦">grid</a> to be within a UA-defined limit,
  dropping all lines outside that limit.
  If a grid item is placed outside this limit,
  its grid area must be <a data-link-type="dfn" href="" id="ref-for-clamp-a-grid-area">clamped</a> to within this limited grid.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="clamp" data-noexport="" id="clamp-a-grid-area">clamp a grid area</dfn>:</p>
    <li data-md="">
     <p>If the <a data-link-type="dfn" href="" id="ref-for-grid-area①⓪">grid area</a> would <a data-link-type="dfn" href="" id="ref-for-grid-span">span</a> outside the limited grid,
its span is clamped to the last line of the limited <a data-link-type="dfn" href="" id="ref-for-grid⑧">grid</a>.</p>
    </li><li data-md="">
     <p>If the <a data-link-type="dfn" href="" id="ref-for-grid-area①①">grid area</a> would be placed completely outside the limited grid,
its span must be truncated to 1
and the area repositioned into the last <a data-link-type="dfn" href="" id="ref-for-grid-track⑥">grid track</a> on that side of the grid.</p>
   <div class="example" id="example-3562ead8">
    <a class="self-link" href=""></a> For example, if a UA only supported grids with at most 1000 tracks in each dimension,
    the following placement properties:
<pre class="lang-css highlight"><span class="nt">.grid-item </span><span class="p">{</span>
  <span class="k">grid-row</span><span class="p">:</span> <span class="m">500</span> <span class="p">/</span> <span class="m">1500</span><span class="p">;</span>
  <span class="k">grid-column</span><span class="p">:</span> <span class="m">2000</span> <span class="p">/</span> <span class="m">3000</span><span class="p">;</span>
<span class="p">}</span>
    <p>Would end up being equivalent to:</p>
<pre class="lang-css highlight"><span class="nt">.grid-item </span><span class="p">{</span>
  <span class="k">grid-row</span><span class="p">:</span> <span class="m">500</span> <span class="p">/</span> <span class="m">1001</span><span class="p">;</span>
  <span class="k">grid-column</span><span class="p">:</span> <span class="m">1000</span> <span class="p">/</span> <span class="m">1001</span><span class="p">;</span>
<span class="p">}</span>
    <section class="main-section" id="The_Grid_Items">
   <header>The Grid Items</header> 
   <h2 class="heading settled" data-level="6" id="grid-items"><span class="secno">6. </span><span class="content"> Grid Items</span><a class="self-link" href=""></a></h2>
   <p>Loosely speaking, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" data-lt="grid item" id="grid-item">grid items</dfn> of a <a data-link-type="dfn" href="" id="ref-for-grid-container②⑤">grid container</a> are boxes representing its in-flow contents.</p>
   <p>Each in-flow child of a <a data-link-type="dfn" href="" id="ref-for-grid-container②⑥">grid container</a> becomes a <a data-link-type="dfn" href="" id="ref-for-grid-item②②">grid item</a>,
  and each contiguous sequence of child <a data-link-type="dfn" href="" id="ref-for-text-run">text runs</a> is wrapped in an <a data-link-type="dfn" href="" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="" id="ref-for-block-container">block container</a> <a data-link-type="dfn" href="" id="ref-for-grid-item②③">grid item</a>.
  However, if the entire sequence of child <a data-link-type="dfn" href="" id="ref-for-text-run①">text runs</a> contains only <a href="">white space</a> (i.e. characters that can be affected by the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-white-space">white-space</a> property)
  it is instead not rendered (just as if its <a data-link-type="dfn" href="" id="ref-for-css-text-node">text nodes</a> were <span class="css">display:none</span>).</p>
   <div class="example" id="example-ae60ee67">
    <a class="self-link" href=""></a>
    <p>Examples of grid items: </p>
<pre class="lang-markup highlight"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"display: grid"</span><span class="p">&gt;</span>

    <span class="c">&lt;!-- grid item: block child --&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item1"</span><span class="p">&gt;</span>block<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="c">&lt;!-- grid item: floated element; floating is ignored --&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item2"</span> <span class="na">style</span><span class="o">=</span><span class="s">"float: left;"</span><span class="p">&gt;</span>float<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="c">&lt;!-- grid item: anonymous block box around inline content --&gt;</span>
    anonymous item 3

    <span class="c">&lt;!-- grid item: inline child --&gt;</span>
    <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>
        item 4
        <span class="c">&lt;!-- grid items do not </span><a href=""><span class="c">split</span></a><span class="c"> around blocks --&gt;</span>
        <span class="p">&lt;</span><span class="nt">q</span> <span class="na">style</span><span class="o">=</span><span class="s">"display: block"</span> <span class="na">id</span><span class="o">=</span><span class="s">not-an-item</span><span class="p">&gt;</span>item 4<span class="p">&lt;/</span><span class="nt">q</span><span class="p">&gt;</span>
        item 4
    <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
     <figcaption>grid items determined from above code block</figcaption>
      <a href=""> <object data="./CSS Grid Layout Module Level 1_files/grid-item-determination.png" type="image/png"> <ol> <li>grid item containing <samp>block</samp>. </li><li>grid item containing <samp>float</samp>. </li><li>(Anonymous, unstyleable) grid item containing <samp>anonymous item 3</samp>. </li><li>grid item containing three blocks in succession: <ul> <li>Anonymous block containing <samp>item 4</samp>. </li><li><code>&lt;q&gt;</code> element block containing <samp>item 4</samp>. </li><li>Anonymous block containing <samp>item 4</samp>. </li></ul> </li></ol> </object> </a>
   <p class="note" role="note"><span>Note:</span> inter-element white space disappears:
  it does not become its own grid item,
  even though inter-element text <em>does</em> get wrapped in an anonymous grid item.</p>
   <p class="note" role="note"><span>Note:</span> The box of a anonymous item is unstyleable,
  since there is no element to assign style rules to.
  Its contents will however inherit styles (such as font settings) from the grid container.</p>
   <h3 class="heading settled" data-level="6.1" id="grid-item-display"><span class="secno">6.1. </span><span class="content"> Grid Item Display</span><a class="self-link" href=""></a></h3>
    A <a data-link-type="dfn" href="" id="ref-for-grid-item②④">grid item</a> establishes a new formatting context for its contents.
  The type of this formatting context is determined by its <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display⑤">display</a> value, as usual.
  However, grid items are <dfn data-dfn-type="dfn" data-noexport="" id="grid-level">grid-level<a class="self-link" href=""></a></dfn> boxes, not block-level boxes:
  they participate in their container’s <a data-link-type="dfn" href="" id="ref-for-grid-formatting-context">grid formatting context</a>,
  not in a block formatting context.
   <p>The <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display⑥">display</a> value of a <a data-link-type="dfn" href="" id="ref-for-grid-item②⑤">grid item</a> is <a data-link-type="dfn" href="" id="ref-for-blockify">blockified</a>:
  if the specified <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display⑦">display</a> of an in-flow child of an element generating a <a data-link-type="dfn" href="" id="ref-for-grid-container②⑦">grid container</a> is an inline-level value, it computes to its block-level equivalent.
  (See <a href="">CSS2.1§9.7</a> <a data-link-type="biblio" href="">[CSS21]</a> and <a href="">CSS Display</a> <a data-link-type="biblio" href="">[CSS3-DISPLAY]</a> for details on this type of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display⑧">display</a> value conversion.)</p>
   <p class="note" role="note"><span>Note:</span> Some values of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-display⑨">display</a> normally trigger the creation of anonymous boxes around the original box.
  If such a box is a <a data-link-type="dfn" href="" id="ref-for-grid-item②⑥">grid item</a>,
  it is blockified first,
  and so anonymous box creation will not happen.
  For example, two contiguous <a data-link-type="dfn" href="" id="ref-for-grid-item②⑦">grid items</a> with <a class="css" data-link-type="propdesc" href="" id="ref-for-propdef-display①⓪">display: table-cell</a> will become two separate <a class="css" data-link-type="propdesc" href="" id="ref-for-propdef-display①①">display: block</a> <a data-link-type="dfn" href="" id="ref-for-grid-item②⑧">grid items</a>,
  instead of being wrapped into a single anonymous table.</p>
   <h3 class="heading settled" data-level="6.2" id="grid-item-sizing"><span class="secno">6.2. </span><span class="content"> Grid Item Sizing</span><a class="self-link" href=""></a></h3>
   <p>A <a data-link-type="dfn" href="" id="ref-for-grid-item②⑨">grid item</a> is sized within the containing block defined by its <a data-link-type="dfn" href="" id="ref-for-grid-area①②">grid area</a>.</p>
   <p>Grid item calculations for <a class="property" data-link-type="propdesc">auto</a> widths and heights
  vary by their <a href="">self-alignment values</a>:</p>
    <dt data-md=""><a class="css" data-link-type="maybe" href="" id="ref-for-valdef-align-self-normal">normal</a>
    </dt><dd data-md="">
     <p>If the grid item is either non-replaced—<wbr>or is replaced but has no intrinsic aspect ratio and no intrinsic size in the relevant dimension—<wbr>use the width calculation rules for non-replaced boxes
as defined in <a href="">CSS2.1 § 10.3.3</a>.</p>
     <p>Otherwise, if the grid item has an intrinsic ratio or an intrinsic size in the relevant dimension,
the grid item is sized as for <a class="css" data-link-type="propdesc" href="" id="ref-for-propdef-align-self">align-self: start</a> (consistent with the width calculation rules for block-level replaced elements in <a href="">CSS2.1 § 10.3.4</a>).</p>
    </dd><dt data-md=""><a class="css" data-link-type="maybe" href="" id="ref-for-valdef-align-self-stretch①">stretch</a>
    </dt><dd data-md="">
     <p>Use the width calculation rules for non-replaced boxes, as defined in <a href="">CSS2.1 § 10.3.3</a>.</p>
     <p class="note" role="note"><span>Note:</span> This may distort the aspect ratio of the item, if it has one.</p>
    </dd><dt data-md="">all other values
    </dt><dd data-md="">
     <p>Size the item as <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-width-fit-content">fit-content</a>.</p>
   <div class="note" role="note">
     The following informative table summarizes the automatic sizing of grid items:
    <table class="data">
     <caption>Summary of automatic sizing behavior of grid items</caption>
       </th><th>Non-replaced Element Size
       </th><th>Replaced Element Size
       <th scope="row"><a class="css" data-link-type="maybe" href="" id="ref-for-valdef-align-self-normal①">normal</a>
       </th><td>Fill grid area
       </td><td>Use intrinsic size
       <th scope="row"><a class="css" data-link-type="maybe" href="" id="ref-for-valdef-align-self-stretch②">stretch</a>
       </th><td>Fill grid area
       </td><td>Fill grid area
       <th scope="row"><span class="css">start</span>/<a class="css" data-link-type="maybe" href="" id="ref-for-valdef-align-items-center">center</a>/etc.
       </th><td><a class="css" data-link-type="maybe" href="" id="ref-for-valdef-width-fit-content①">fit-content</a> sizing (like floats)
       </td><td>Use intrinsic size
   <p class="note" role="note"><span>Note:</span> The <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-min-width-auto">auto</a> value of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-min-width">min-width</a> and <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-min-height">min-height</a> affects track sizing in the relevant axis
  similar to how it affects the main size of a <a data-link-type="dfn" href="" id="ref-for-flex-item①">flex item</a>.
  See <a href="">§6.6 Automatic Minimum Size of Grid Items</a>.</p>
   <h3 class="heading settled" data-level="6.3" id="order-property"><span class="secno">6.3. </span><span class="content"> Reordered Grid Items: the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order③">order</a> property</span><a class="self-link" href=""></a></h3>
   <p>The <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order④">order</a> property also applies to <a data-link-type="dfn" href="" id="ref-for-grid-item③⓪">grid items</a>.
  It affects their <a href="">auto-placement</a> and <a href="">painting order</a>.</p>
   <p><strong class="advisement"> As with reordering flex items,
  the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-order⑤">order</a> property must only be used
  when the visual order needs to be <em>out-of-sync</em> with the speech and navigation order;
  otherwise the underlying document source should be reordered instead.
  See <a href="">CSS Flexbox 1 §5.4.1 Reordering and Accessibility</a> in <a data-link-type="biblio" href="">[CSS-FLEXBOX-1]</a>.</strong></p>
   <h3 class="heading settled" data-level="6.4" id="item-margins"><span class="secno">6.4. </span><span class="content"> Grid Item Margins and Paddings</span><a class="self-link" href=""></a></h3>
   <p>As adjacent grid items are independently contained
  within the containing block formed by their <a data-link-type="dfn" href="" id="ref-for-grid-area①③">grid areas</a>,
  the margins of adjacent <a data-link-type="dfn" href="" id="ref-for-grid-item③①">grid items</a> do not <a href="">collapse</a>.</p>
   <p>Percentage margins and paddings on <a data-link-type="dfn" href="" id="ref-for-grid-item③②">grid items</a> can be resolved against either:</p>
    <li data-md="">
     <p>their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,</p>
    </li><li data-md="">
     <p>the inline axis (left/right/top/bottom percentages all resolve against width)</p>
   <p>A User Agent must choose one of these two behaviors.</p>
   <p class="note" role="note"><span>Note:</span> This variance sucks, but it accurately captures the current state of the world
  (no consensus among implementations, and no consensus within the CSSWG).
  It is the CSSWG’s intention that browsers will converge on one of the behaviors,
  at which time the spec will be amended to require that.</p>
   <p><strong class="advisement"> Authors should avoid using percentages in paddings or margins on <a data-link-type="dfn" href="" id="ref-for-grid-item③③">grid items</a> entirely,
  as they will get different behavior in different browsers.</strong></p>
   <p>Auto margins expand to absorb extra space in the corresponding dimension,
  and can therefore be used for alignment.</p>
   <p>See <a href="">§10.2 Aligning with auto margins</a></p>
   <h3 class="heading settled" data-level="6.5" id="z-order"><span class="secno">6.5. </span><span class="content"> Z-axis Ordering: the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-z-index">z-index</a> property</span><a class="self-link" href=""></a></h3>
   <p><a data-link-type="dfn" href="" id="ref-for-grid-item③④">Grid items</a> can overlap when they are positioned into intersecting <a data-link-type="dfn" href="" id="ref-for-grid-area①④">grid areas</a>,
  or even when positioned in non-intersecting areas because of negative margins or positioning.
  The painting order of <a data-link-type="dfn" href="" id="ref-for-grid-item③⑤">grid items</a> is exactly the same as inline blocks <a data-link-type="biblio" href="">[CSS21]</a>,
  except that <a data-link-type="dfn" href="" id="ref-for-order-modified-document-order">order-modified document order</a> is used in place of raw document order,
  and <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-z-index①">z-index</a> values other than <a class="css" data-link-type="value" href="" id="ref-for-valdef-z-index-auto">auto</a> create a stacking context even if <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-position">position</a> is <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-position-static">static</a> (behaving exactly as if <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-position①">position</a> were <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-position-relative">relative</a>).
  Thus the <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-z-index②">z-index</a> property can easily be used to control the z-axis order of grid items.</p>
   <p class="note" role="note"> Note: Descendants that are positioned outside a grid item still participate in any stacking context established by the grid item. </p>
   <div class="example" id="example-93b7c6dc">
    <a class="self-link" href=""></a> The following diagram shows several overlapping grid items,
    with a combination of implicit source order
    and explicit <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-z-index③">z-index</a> used to control their stacking order.
      <img src="./CSS Grid Layout Module Level 1_files/drawing-order.png">
     <figcaption>Drawing order controlled by z-index and source order.</figcaption>
<pre>&lt;style type="text/css"&gt;
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
#A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
#B { grid-column: 1; grid-row: 1; z-index: 10; }
#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
     z-index: 5; justify-self: center; align-self: center; }

&lt;div id="grid"&gt;
  &lt;div id="A"&gt;A&lt;/div&gt;
  &lt;div id="B"&gt;B&lt;/div&gt;
  &lt;div id="C"&gt;C&lt;/div&gt;
  &lt;div id="D"&gt;D&lt;/div&gt;
  &lt;div id="E"&gt;E&lt;/div&gt;
   <h3 class="heading settled" data-level="6.6" id="min-size-auto"><span class="secno">6.6. </span><span class="content"> Automatic Minimum Size of Grid Items</span><a class="self-link" href=""></a></h3>
   <p>To provide a more reasonable default minimum size for <a data-link-type="dfn" href="" id="ref-for-grid-item③⑥">grid items</a>,
  this specification defines
  that the <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-min-width-auto①">auto</a> value of <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-min-width①">min-width</a>/<a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-min-height①">min-height</a> also applies an <a data-link-type="dfn" href="" id="ref-for-automatic-minimum-size">automatic minimum size</a> in the specified axis
  to <a data-link-type="dfn" href="" id="ref-for-grid-item③⑦">grid items</a> whose <a class="property" data-link-type="propdesc" href="" id="ref-for-propdef-overflow①">overflow</a> is <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-overflow-visible">visible</a> and which span at least one <a data-link-type="dfn" href="" id="ref-for-grid-track⑦">track</a> whose <a data-link-type="dfn" href="" id="ref-for-min-track-sizing-function">min track sizing function</a> is <a class="css" data-link-type="maybe" href="" id="ref-for-valdef-grid-template-columns-auto④">auto</a>.</p>
   <p>The <a data-link-type="dfn" href="" id="ref-for-automatic-minimum-size①">automatic minimum size</a> for a <a data-link-type="dfn" href="" id="ref-for-grid-item③⑧">grid item</a> in a given dimension is
  its <a data-link-type="dfn" href="" id="ref-for-specified-size">specified size</a> if it exists,
  otherwise its <a data-link-type="dfn" href="" id="ref-for-transferred-size">transferred size</a> if that exists,
  else its <a data-link-type="dfn" href="" id="ref-for-content-size">content size</a>,
  each as defined in <a data-link-type="biblio" href="">[CSS-FLEXBOX-1]</a>.
  However, if the <a data-link-type="dfn" href="" id="ref-for-grid-item③⑨">grid item</a> spans only <a data-link-type="dfn" href="" id="ref-for-grid-track⑧">grid tracks</a> that have a <a data-link-type="dfn" href="" id="ref-for-fixed-sizing-function">fixed</a> <a data-link-type="dfn" href="" id="ref-for-max-track-sizing-function">max track sizing function</a>,
  its <a data-link-type="dfn" href="" id="ref-for-specified-size①">specified size</a> and <a data-link-type="dfn" href="" id="ref-for-content-size①">content size</a> in that dimension
  (and the input to the <a data-link-type="dfn" href="" id="ref-for-transferred-size①">transferred size</a> in the other dimension)
  are further clamped to less than or equal to the <a data-link-type="dfn" href="" id="ref-for-stretch-fit">stretch fit</a> the <a data-link-type="dfn" href="" id="ref-for-grid-area①⑤">grid area</a>’s size
  (so as to prevent the <a data-link-type="dfn" href="" id="ref-for-automatic-minimum-size②">automatic minimum size</a> from forcing overflow of its fixed-size grid area).</p>
   <div class="note" id="min-size-opt" role="note">
    <a class="self-link" href=""></a> Note that while a content-based minimum size is often appropriate,
    and helps prevent content from overlapping or spilling outside its container,
    in some cases it is not:
    <p>In particular, if grid layout is being used for a major content area of a document,
    it is better to set an explicit font-relative minimum width such as <a class="css" data-link-type="propdesc" href="" id="ref-for-propdef-min-width②">min-width: 12em</a>.
    A content-based minimum width could result in a large table or large image
    stretching the size of the entire content area, potentially into an overflow zone,
    and thereby making lines of text needlessly long and hard to read.</p>
    <p>Note also, when content-based sizing is used on an item with large amounts of content,
    the layout engine must traverse all of this content before finding its minimum size,
    whereas if the author sets an explicit minimum, this is not necessary.
    (For items with small amounts of content, however,
    this traversal is trivial and therefore not a performance concern.)</p>




	box-sizing: border-box;
    margin: 0;
    padding: 0;
body {
  font-family: 'IBM Plex Sans', sans-serif;
  margin: 0 auto;                
  padding: 1.6em 1.5em 2em 50px; 

line-height: 1.5;
		word-wrap: break-word;
		overflow-wrap: break-word;
color: black;

div.head { margin-bottom: 1em; }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;

	div.head h2 { margin-bottom: 1.5em;}

dl {
	margin: 1em;
	line-height: 1.5;
dt {
dd {
	margin: 0 0 0.5em 2em;
.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
p.copyright,p.copyright small { 
	font-size: small; 
hr {
	margin: 10px;
.issue {
	padding: .5em;
	border-left-color: #E05252; 

.toc {
	list-style: none;
.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
	.toc a:visited {
		border-color: #054572;
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li li { font-size:   85%;    }

	.toc > li             { margin: 1.5rem 0;    }
	.toc > li li          { margin: 0.3rem 0;    }
	.toc > li li li       { margin-left: 2rem;   }

	/* Section numbers in a column of their own */
	.toc .secno {
		float: left;
		width: 4rem;
		white-space: nowrap;
	.toc > li li li li .secno {
		font-size: 85%;
	.toc > li li li li li .secno {
		font-size: 100%;
  padding: 20px;
  overflow: auto;
#main-doc {
  position: absolute;
  margin-left: 20px;


@media only screen and (max-width: 600px) {

  border-right: 0;
  padding: 20px;
  overflow: none;
  /*background-color: blue;*/
#main-doc {
  position: relative;
  margin-left: 20px;




              // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.