|
| 1 | +<pre class='metadata'> |
| 2 | +Title: CSS Grid Layout Module Level 2 |
| 3 | +Shortname: css-grid |
| 4 | +Level: 2 |
| 5 | +Status: UD |
| 6 | +Group: csswg |
| 7 | +Work Status: exploring |
| 8 | +ED: https://drafts.csswg.org/css-grid-2/ |
| 9 | +Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/ |
| 10 | +Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400 |
| 11 | +Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com |
| 12 | +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. |
| 13 | +</pre> |
| 14 | + |
| 15 | +Introduction {#intro} |
| 16 | +===================== |
| 17 | + |
| 18 | +This level is currently maintained as a diff spec over the level 1 module [[!CSS-GRID-1]]. |
| 19 | + |
| 20 | + |
| 21 | +<h2 id="grid-model"> |
| 22 | +Grid Containers</h2> |
| 23 | + |
| 24 | +<h3 id='grid-containers'> |
| 25 | +Establishing Grid Containers: the ''subgrid'' 'display' value</h3> |
| 26 | + |
| 27 | + <a>Subgrids</a> provide the ability to pass grid parameters down through nested elements, |
| 28 | + and content-based sizing information back up to their parent grid. |
| 29 | + |
| 30 | + <pre class="propdef"> |
| 31 | + Name: display |
| 32 | + New values: subgrid |
| 33 | + </pre> |
| 34 | + |
| 35 | + <dl dfn-for="display" dfn-type=value> |
| 36 | + <dt><dfn>subgrid</dfn> |
| 37 | + <dd> |
| 38 | + If the element is a <a>grid item</a> |
| 39 | + (i.e. it is in-flow and its parent is a <a>grid container</a>), |
| 40 | + this value makes the element a <a>subgrid</a> |
| 41 | + (which is a special type of <a>grid container</a> box, see [[#subgrids]]) |
| 42 | + and consequently ignores its 'grid-template-*' and 'grid-*-gap' properties |
| 43 | + in favor of adopting the parent grid tracks that it spans. |
| 44 | + |
| 45 | + Otherwise, |
| 46 | + it behaves as ''grid''. |
| 47 | + </dl> |
| 48 | + |
| 49 | +<!-- |
| 50 | + ██████ ██ ██ ████████ ██████ ████████ ████ ████████ |
| 51 | +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ |
| 52 | +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ |
| 53 | + ██████ ██ ██ ████████ ██ ████ ████████ ██ ██ ██ |
| 54 | + ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ |
| 55 | +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ |
| 56 | + ██████ ███████ ████████ ██████ ██ ██ ████ ████████ |
| 57 | +--> |
| 58 | + |
| 59 | +<h2 id="subgrids"> |
| 60 | +Subgrids</h2> |
| 61 | + |
| 62 | + A <a>grid item</a> can itself be a <a>grid container</a> by giving it ''display: grid''; |
| 63 | + in this case the layout of its contents will be independent of the layout of the grid it participates in. |
| 64 | + |
| 65 | + In some cases it might be necessary for the contents of multiple <a>grid items</a> to align to each other. |
| 66 | + A <a>grid container</a> that is itself a <a>grid item</a> |
| 67 | + can defer the definition of its rows and columns to its parent <a>grid container</a> |
| 68 | + by using ''display: subgrid'', |
| 69 | + making it a <dfn export>subgrid</dfn>. |
| 70 | + In this case, the <a>grid items</a> of the <a>subgrid</a> |
| 71 | + participate in sizing the <a>grid</a> of the parent <a>grid container</a>, |
| 72 | + allowing the contents of both grids to align. |
| 73 | + |
| 74 | + <div class="example"> |
| 75 | + For example, suppose we have a form consisting of a list of inputs with labels: |
| 76 | + |
| 77 | + <pre class="lang-html"> |
| 78 | + <ul> |
| 79 | + <li><label>Name:</label> <input name=fn> |
| 80 | + <li><label>Address:</label> <input name=address> |
| 81 | + <li><label>Phone:</label> <input name=phone> |
| 82 | + </ul> |
| 83 | + </pre> |
| 84 | + |
| 85 | + We want the labels and inputs to align, and we want to style each list item with a border. |
| 86 | + This can be accomplished with subgrid layout: |
| 87 | + |
| 88 | + <pre> |
| 89 | + ul { |
| 90 | + display: grid; |
| 91 | + grid: auto-flow / auto 1fr; |
| 92 | + } |
| 93 | + li { |
| 94 | + display: subgrid; |
| 95 | + grid-column: span 2; |
| 96 | + margin: 0.5em; |
| 97 | + border: solid; |
| 98 | + padding: 0.5em; |
| 99 | + } |
| 100 | + label { |
| 101 | + grid-column: 1; |
| 102 | + } |
| 103 | + input { |
| 104 | + grid-column: 2; |
| 105 | + } |
| 106 | + </pre> |
| 107 | + </div> |
| 108 | + |
| 109 | + A <a>subgrid</a> behaves just like a normal <a>grid container</a> except that: |
| 110 | + |
| 111 | + <ul style="list-style-type: lower-alpha"> |
| 112 | + <li> |
| 113 | + The number of explicit tracks is given by its <a>grid span</a>, |
| 114 | + rather than by 'grid-template-rows'/'grid-template-columns'. |
| 115 | + |
| 116 | + <li> |
| 117 | + The <a>grid-placement properties</a> of the <a>subgrid</a>’s <a>grid items</a> |
| 118 | + are scoped to the lines covered by the subgrid. |
| 119 | + E.g., numeric indices count starting from the first line of the subgrid |
| 120 | + rather than the first line of the parent grid. |
| 121 | + |
| 122 | + <li> |
| 123 | + The <a>subgrid</a> itself lays out as an ordinary <a>grid item</a> in its parent grid, |
| 124 | + but acts as if it was completely empty for sizing purposes. |
| 125 | + |
| 126 | + The <a>subgrid</a>'s own <a>grid items</a> participate in the sizing of its parent grid and are aligned to it. |
| 127 | + In this process, the sum of the <a>subgrid</a>'s margin, padding, and borders at each edge |
| 128 | + are applied as an extra layer of margin to the items at those edges. |
| 129 | + |
| 130 | + <div class="example"> |
| 131 | + For example, if we have a 3×3 grid with the following tracks: |
| 132 | + |
| 133 | + <pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre> |
| 134 | + |
| 135 | + If a subgrid covers the last two tracks, |
| 136 | + its first two columns correspond to the parent grid's last two columns, |
| 137 | + and any items positioned into those tracks participate in sizing the parent grid. |
| 138 | + Specifically, an item positioned in the first track of the subgrid |
| 139 | + influences the auto-sizing of the parent grid's middle track. |
| 140 | + |
| 141 | + <pre> |
| 142 | + #subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */ |
| 143 | + #subgrid > :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */ |
| 144 | + </pre> |
| 145 | + |
| 146 | + If the subgrid has margins/borders/padding, |
| 147 | + the size of those margins/borders/padding also influences sizing. |
| 148 | + For example, if the subgrid has 100px padding: |
| 149 | + |
| 150 | + <pre>#subgrid { padding: 100px; }</pre> |
| 151 | + |
| 152 | + Then a <a>grid item</a> in the <a>subgrid's</a> first track |
| 153 | + acts as if it has an additional ''100px'' of top, left, and bottom margin |
| 154 | + influencing the sizing of the parent grid's tracks |
| 155 | + and the <a>grid item's</a> own position. |
| 156 | + </div> |
| 157 | + |
| 158 | + <li> |
| 159 | + The 'grid-gap' properties do not apply to subgrids. |
| 160 | + (Their items are instead spaced by the 'grid-gap' of their parent grid, |
| 161 | + since they are laid out in the parent grid.) |
| 162 | + |
| 163 | + <li> |
| 164 | + The <a>subgrid</a> does not have any <a>implicit grid tracks</a>; |
| 165 | + every <a>grid area</a> within it is <a>clamped</a> to its <a>explicit grid</a>. |
| 166 | + |
| 167 | + <div class="example"> |
| 168 | + For example, if a ''span 1'' subgrid has a <a>grid item</a> with ''grid-column: 2 / span 3;'', |
| 169 | + then that item is instead forced into (and limited to) the first (only) track in the subgrid. |
| 170 | + </div> |
| 171 | + |
| 172 | + <li> |
| 173 | + The <a>subgrid</a> is always stretched in both dimensions: |
| 174 | + the 'align-self'/'justify-self' properties on it are ignored, |
| 175 | + as are any specified width/height constraints. |
| 176 | + |
| 177 | + <li> |
| 178 | + Layoutwise, the <a>subgrid</a>’s <a>explicit grid</a> |
| 179 | + is always aligned with the corresponding section of the parent <a>grid</a>; |
| 180 | + the 'align-content'/'justify-content' properties on it are also ignored. |
| 181 | + |
| 182 | + <li> |
| 183 | + The UA <em>may</em> apply 'overflow' to <a>subgrids</a> |
| 184 | + so the contents of the subgrid can be scrolled aside. |
| 185 | + (Note: the act of scrolling does not affect layout.) |
| 186 | + Overflow must otherwise be treated as ''visible''. |
| 187 | + |
| 188 | + <li> |
| 189 | + Since <a>subgrids</a> can be placed before their contents are placed, |
| 190 | + their lines automatically receive the line names specified on the parent <a>grid</a>. |
| 191 | + </ul> |
0 commit comments