forked from jgthms/css-reference
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcss-grid.html
More file actions
1 lines (1 loc) · 81 KB
/
Copy pathcss-grid.html
File metadata and controls
1 lines (1 loc) · 81 KB
1
<section id="grid-area" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-area/" data-property-name="grid-area" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-area">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-area" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-area"><span>#</span>grid-area</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-row-start" data-property-name="grid-row-start">grid-row-start</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-column-start" data-property-name="grid-column-start">grid-column-start</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-row-end" data-property-name="grid-row-end">grid-row-end</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-column-end" data-property-name="grid-column-end">grid-column-end</a></code>.</p></div></header><style type="text/css">.grid-area { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-area: auto;">grid-area: auto;</code></p><div class="example-description"><p>The grid item's column and row starts and ends are automatically set.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-area" id="grid-area-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-area-auto{ grid-area:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-area: main;">grid-area: main;</code></p><div class="example-description"><p>You can use an <strong>area name</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-area" id="grid-area-main"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--purple">Footer</p><p class="block block--pink"><strong>Target</strong></p></div></div></aside><style type="text/css">#grid-area-main{ grid-area:main;}</style><style type="text/css">#grid-area-main{ grid-template-columns: 3fr 70fr;grid-template-rows: 50px 200px 50px;grid-template-areas: "header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"; }</style><style type="text/css">#grid-area-main .block--alpha { grid-area: header; }#grid-area-main .block--beta { grid-area: sidebar; }#grid-area-main .block--purple { grid-area: footer; }#grid-area-main .block--pink { grid-row: main; }</style></section></section><section id="grid-auto-columns" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-auto-columns/" data-property-name="grid-auto-columns" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-auto-columns">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-auto-columns" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-auto-columns"><span>#</span>grid-auto-columns</a></h2><div class="property-description"><p>Defines the size of grid columns that were created <em>implicitly</em>: it means that <code>grid-auto-columns</code> targets the columns that were <em>not</em> defined with <code>grid-template-columns</code> or <code>grid-template-areas</code>.</p></div></header><style type="text/css">.grid-auto-columns { display: grid;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-columns: auto;">grid-auto-columns: auto;</code></p><div class="example-description"><p>The implicity-created columns have an <code>auto</code> size.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-columns" id="grid-auto-columns-auto"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-auto-columns-auto{ grid-auto-columns:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-columns: 100px;">grid-auto-columns: 100px;</code></p><div class="example-description"><p>Here we combine <code>grid-template-areas: "header header header" "sidebar main main"</code> with <code>grid-template-columns: 50px 200px</code>.</p><p>In this situation, the <code>grid-template-areas</code> defines <strong>3 columns</strong>, while the <code>grid-template-columns</code> only defines <strong>2</strong> column widths.</p><p>As a result, the third column width takes its value from the <code>grid-auto-columns</code> property: <code>100px</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-columns" id="grid-auto-columns-100px"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p><p class="block block--yellow">50px</p><p class="block block--purple">200px</p><p class="block block--orange">100px</p></div></div></aside><style type="text/css">#grid-auto-columns-100px{ grid-auto-columns:100px;}</style><style type="text/css">#grid-auto-columns-100px{ grid-template-areas: "header header header" "sidebar main main";grid-template-columns: 50px 200px; }</style><style type="text/css">#grid-auto-columns-100px .block--alpha { grid-area: header; }#grid-auto-columns-100px .block--beta { grid-area: sidebar; }#grid-auto-columns-100px .block--pink { grid-area: main; }</style></section></section><section id="grid-auto-flow" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-auto-flow/" data-property-name="grid-auto-flow" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-auto-flow">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-auto-flow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-auto-flow"><span>#</span>grid-auto-flow</a></h2><div class="property-description"><p>Defines the position of auto-generated <strong>grid items</strong>.</p></div></header><style type="text/css">.grid-auto-flow { display: grid;grid-template-areas: "header header header" "sidebar main main" "footer footer footer";padding: 0; }</style><style type="text/css">.grid-auto-flow .block--alpha { grid-area: header; }.grid-auto-flow .block--beta { grid-area: sidebar; }.grid-auto-flow .block--pink { grid-area: main; }.grid-auto-flow .block--yellow { grid-area: footer; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-flow: row;">grid-auto-flow: row;</code></p><div class="example-description"><p>Here we have <code>grid-template-areas: "header header header" "sidebar main main" "footer footer footer"</code>, plus an additional "Other" grid item. The algorithm places it on its own <strong>row</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-flow" id="grid-auto-flow-row"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p><p class="block block--yellow">Footer</p><p class="block block--purple">Other</p></div></div></aside><style type="text/css">#grid-auto-flow-row{ grid-auto-flow:row;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-flow: column;">grid-auto-flow: column;</code></p><div class="example-description"><p>Here we have <code>grid-template-areas: "header header header" "sidebar main main" "footer footer footer"</code>, plus an additional "Other" grid item. The algorithm places it in its own <strong>column</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-flow" id="grid-auto-flow-column"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p><p class="block block--yellow">Footer</p><p class="block block--purple">Other</p></div></div></aside><style type="text/css">#grid-auto-flow-column{ grid-auto-flow:column;}</style></section></section><section id="grid-auto-rows" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-auto-rows/" data-property-name="grid-auto-rows" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-auto-rows">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-auto-rows" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-auto-rows"><span>#</span>grid-auto-rows</a></h2><div class="property-description"><p>Defines the size of grid rows that were created <em>implicitly</em>: it means that <code>grid-auto-rows</code> targets the rows that were <em>not</em> defined with <code>grid-template-rows</code> or <code>grid-template-areas</code>.</p></div></header><style type="text/css">.grid-auto-rows { display: grid;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-rows: auto;">grid-auto-rows: auto;</code></p><div class="example-description"><p>The implicity-created rows have an <code>auto</code> size.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-rows" id="grid-auto-rows-auto"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-auto-rows-auto{ grid-auto-rows:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-rows: 100px;">grid-auto-rows: 100px;</code></p><div class="example-description"><p>Here we combine <code>grid-template-areas: "header header header" "sidebar main main" "footer footer footer"</code> with <code>grid-template-rows: 50px 200px</code>.</p><p>In this situation, the <code>grid-template-areas</code> defines <strong>3 rows</strong>, while the <code>grid-template-rows</code> only defines <strong>2</strong> row heights.</p><p>As a result, the third row height (the footer) takes its value from the <code>grid-auto-rows</code> property: <code>100px</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-auto-rows" id="grid-auto-rows-100px"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p><p class="block block--yellow">Footer: 100px high</p></div></div></aside><style type="text/css">#grid-auto-rows-100px{ grid-auto-rows:100px;}</style><style type="text/css">#grid-auto-rows-100px{ grid-template-areas: "header header header" "sidebar main main" "footer footer footer";grid-template-rows: 50px 200px; }</style><style type="text/css">#grid-auto-rows-100px .block--alpha { grid-area: header; }#grid-auto-rows-100px .block--beta { grid-area: sidebar; }#grid-auto-rows-100px .block--pink { grid-area: main; }#grid-auto-rows-100px .block--yellow { grid-area: footer; }</style></section></section><section id="grid-column-end" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-column-end/" data-property-name="grid-column-end" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-column-end">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-column-end" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-column-end"><span>#</span>grid-column-end</a></h2><div class="property-description"><p>Defines the <strong>column end</strong> position of a <strong>grid item</strong>.</p></div></header><style type="text/css">.grid-column-end { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-end: auto;">grid-column-end: auto;</code></p><div class="example-description"><p>In this <strong>3-column setup</strong>, the grid item is automatically placed.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-end" id="grid-column-end-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-end-auto{ grid-column-end:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-end: 2;">grid-column-end: 2;</code></p><div class="example-description"><p>The target grid item ends just before the <strong>second</strong> column.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-end" id="grid-column-end-2"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-end-2{ grid-column-end:2;}</style><style type="text/css">#grid-column-end-2 .block--pink { grid-column-end: 2; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-end: 1;">grid-column-end: 1;</code></p><div class="example-description"><p>The target grid item ends just before the <strong>first</strong> column, which automatically creates a <em>fourth</em> column.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-end" id="grid-column-end-1"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-end-1{ grid-column-end:1;}</style><style type="text/css">#grid-column-end-1 .block--pink { grid-column-end: 1; }</style></section></section><section id="grid-column-gap" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-column-gap/" data-property-name="grid-column-gap" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-column-gap">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-column-gap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-column-gap"><span>#</span>grid-column-gap</a></h2><div class="property-description"><p>Defines the gutter between the columns of a <strong>grid container</strong>.</p></div></header><style type="text/css">.grid-column-gap { display: grid;grid-template-columns: auto auto auto;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-gap: 0;">grid-column-gap: 0;</code></p><div class="example-description"><p>Removes the gap.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-gap" id="grid-column-gap-0"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#grid-column-gap-0{ grid-column-gap:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-gap: 10px;">grid-column-gap: 10px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-gap" id="grid-column-gap-10px"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#grid-column-gap-10px{ grid-column-gap:10px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-gap: 3rem;">grid-column-gap: 3rem;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-gap" id="grid-column-gap-3rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#grid-column-gap-3rem{ grid-column-gap:3rem;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-gap: 20%;">grid-column-gap: 20%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-gap" id="grid-column-gap-20"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div></div></aside><style type="text/css">#grid-column-gap-20{ grid-column-gap:20%;}</style></section></section><section id="grid-column-start" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-column-start/" data-property-name="grid-column-start" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-column-start">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-column-start" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-column-start"><span>#</span>grid-column-start</a></h2><div class="property-description"><p>Defines the <strong>column start</strong> position of a <strong>grid item</strong>.</p></div></header><style type="text/css">.grid-column-start { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-start: auto;">grid-column-start: auto;</code></p><div class="example-description"><p>In this <strong>3-column setup</strong>, the grid item is automatically placed.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-start" id="grid-column-start-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-start-auto{ grid-column-start:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-start: 2;">grid-column-start: 2;</code></p><div class="example-description"><p>The target grid item is placed on the <strong>second</strong> column.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-start" id="grid-column-start-2"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-start-2{ grid-column-start:2;}</style><style type="text/css">#grid-column-start-2 .block--pink { grid-column-start: 2; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column-start: 4;">grid-column-start: 4;</code></p><div class="example-description"><p>The target grid item is placed <em>outside</em> the grid, in an auto-generated <strong>fourth</strong> column.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column-start" id="grid-column-start-4"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-start-4{ grid-column-start:4;}</style><style type="text/css">#grid-column-start-4 .block--pink { grid-column-start: 4; }</style></section></section><section id="grid-column" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-column/" data-property-name="grid-column" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-column">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-column" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-column"><span>#</span>grid-column</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-column-start" data-property-name="grid-column-start">grid-column-start</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-column-end" data-property-name="grid-column-end">grid-column-end</a></code>.</p></div></header><style type="text/css">.grid-column { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column: auto auto;">grid-column: auto auto;</code></p><div class="example-description"><p>The grid item's column start and end are automatically set.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column" id="grid-column-auto-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-auto-auto{ grid-column:auto auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column: 1 / 3;">grid-column: 1 / 3;</code></p><div class="example-description"><p>The grid item starts before the first column and ends just before the third one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column" id="grid-column-1--3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-1--3{ grid-column:1 / 3;}</style><style type="text/css">#grid-column-1--3 .block--pink { grid-column: 1 / 3; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column: span 3;">grid-column: span 3;</code></p><div class="example-description"><p>The grid item spans <strong>3 columns</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column" id="grid-column-span-3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-span-3{ grid-column:span 3;}</style><style type="text/css">#grid-column-span-3 .block--pink { grid-column: span 3; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column: 1 / span 4;">grid-column: 1 / span 4;</code></p><div class="example-description"><p>The grid items starts before the first column and spans for <strong>4 columns</strong>, creating a new one in the process.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column" id="grid-column-1--span-4"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-column-1--span-4{ grid-column:1 / span 4;}</style><style type="text/css">#grid-column-1--span-4 .block--pink { grid-column: 1 / span 4; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-column: main;">grid-column: main;</code></p><div class="example-description"><p>You can use an <strong>area name</strong> to "copy" its column start and end positions.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-column" id="grid-column-main"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--yellow">Main</p><p class="block block--purple">Footer</p><p class="block block--pink"><strong>Target</strong></p></div></div></aside><style type="text/css">#grid-column-main{ grid-column:main;}</style><style type="text/css">#grid-column-main{ grid-template-columns: 3fr 70fr;grid-template-rows: 50px 200px 50px;grid-template-areas: "header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"; }</style><style type="text/css">#grid-column-main .block--alpha { grid-area: header; }#grid-column-main .block--beta { grid-area: sidebar; }#grid-column-main .block--yellow { grid-area: main; }#grid-column-main .block--purple { grid-area: footer; }#grid-column-main .block--pink { grid-column: main; }</style></section></section><section id="grid-gap" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-gap/" data-property-name="grid-gap" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-gap">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-gap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-gap"><span>#</span>grid-gap</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-row-gap" data-property-name="grid-row-gap">grid-row-gap</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-column-gap" data-property-name="grid-column-gap">grid-column-gap</a></code>.</p></div></header><style type="text/css">.grid-gap { display: grid;grid-template-columns: auto auto auto;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-gap: 0 0;">grid-gap: 0 0;</code></p><div class="example-description"><p>Removes both rows and columns gaps.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-gap" id="grid-gap-0-0"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-gap-0-0{ grid-gap:0 0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-gap: 10px;">grid-gap: 10px;</code></p><div class="example-description"><p>You can set a <strong>single value</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-gap" id="grid-gap-10px"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-gap-10px{ grid-gap:10px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-gap: 3rem 1rem;">grid-gap: 3rem 1rem;</code></p><div class="example-description"><p>You can set a value for <strong>each</strong> direction: rows first, columns second.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-gap" id="grid-gap-3rem-1rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-gap-3rem-1rem{ grid-gap:3rem 1rem;}</style></section></section><section id="grid-row-end" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-row-end/" data-property-name="grid-row-end" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-row-end">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-row-end" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-row-end"><span>#</span>grid-row-end</a></h2><div class="property-description"><p>Defines the <strong>row end</strong> position of a <strong>grid item</strong>.</p></div></header><style type="text/css">.grid-row-end { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-end: auto;">grid-row-end: auto;</code></p><div class="example-description"><p>In this <strong>3-column setup</strong>, the grid item is automatically placed.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-end" id="grid-row-end-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--orange">Item</p></div></div></aside><style type="text/css">#grid-row-end-auto{ grid-row-end:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-end: 3;">grid-row-end: 3;</code></p><div class="example-description"><p>The target grid item ends just before the <strong>third</strong> row.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-end" id="grid-row-end-3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--orange">Item</p></div></div></aside><style type="text/css">#grid-row-end-3{ grid-row-end:3;}</style><style type="text/css">#grid-row-end-3 .block--pink { grid-row-end: 3; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-end: 4;">grid-row-end: 4;</code></p><div class="example-description"><p>The target grid item ends just before the <strong>fourth</strong> row, which automatically creates a <em>third</em> row.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-end" id="grid-row-end-4"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--orange">Item</p></div></div></aside><style type="text/css">#grid-row-end-4{ grid-row-end:4;}</style><style type="text/css">#grid-row-end-4 .block--pink { grid-row-end: 4; }</style></section></section><section id="grid-row-gap" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-row-gap/" data-property-name="grid-row-gap" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-row-gap">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-row-gap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-row-gap"><span>#</span>grid-row-gap</a></h2><div class="property-description"><p>Defines the gutter between the rows of a <strong>grid container</strong>.</p></div></header><style type="text/css">.grid-row-gap { display: grid;grid-template-columns: auto auto auto;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-gap: 0;">grid-row-gap: 0;</code></p><div class="example-description"><p>Removes the gap.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-gap" id="grid-row-gap-0"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-row-gap-0{ grid-row-gap:0;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-gap: 10px;">grid-row-gap: 10px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-gap" id="grid-row-gap-10px"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-row-gap-10px{ grid-row-gap:10px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-gap: 3rem;">grid-row-gap: 3rem;</code></p><div class="example-description"><p>You can use <strong>(r)em</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-gap" id="grid-row-gap-3rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-row-gap-3rem{ grid-row-gap:3rem;}</style></section></section><section id="grid-row-start" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-row-start/" data-property-name="grid-row-start" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-row-start">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-row-start" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-row-start"><span>#</span>grid-row-start</a></h2><div class="property-description"><p>Defines the <strong>row start</strong> position of a <strong>grid item</strong>.</p></div></header><style type="text/css">.grid-row-start { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-start: auto;">grid-row-start: auto;</code></p><div class="example-description"><p>In this <strong>3-column setup</strong>, the grid item is automatically placed on the first row.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-start" id="grid-row-start-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-start-auto{ grid-row-start:auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-start: 2;">grid-row-start: 2;</code></p><div class="example-description"><p>The target grid item is placed on the <strong>second</strong> row.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-start" id="grid-row-start-2"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-start-2{ grid-row-start:2;}</style><style type="text/css">#grid-row-start-2 .block--pink { grid-row-start: 2; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row-start: 3;">grid-row-start: 3;</code></p><div class="example-description"><p>The target grid item is placed <em>outside</em> the grid, in an auto-generated <strong>third</strong> row.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row-start" id="grid-row-start-3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--orange">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-start-3{ grid-row-start:3;}</style><style type="text/css">#grid-row-start-3 .block--pink { grid-row-start: 3; }</style></section></section><section id="grid-row" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-row/" data-property-name="grid-row" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-row">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-row" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-row"><span>#</span>grid-row</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-row-start" data-property-name="grid-row-start">grid-row-start</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-row-end" data-property-name="grid-row-end">grid-row-end</a></code>.</p></div></header><style type="text/css">.grid-row { display: grid;grid-template-columns: 1fr 1fr 1fr;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row: auto auto;">grid-row: auto auto;</code></p><div class="example-description"><p>The grid item's row start and end are automatically set.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row" id="grid-row-auto-auto"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-auto-auto{ grid-row:auto auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row: 1 / 3;">grid-row: 1 / 3;</code></p><div class="example-description"><p>The grid item starts before the first row and ends just before the third one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row" id="grid-row-1--3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-1--3{ grid-row:1 / 3;}</style><style type="text/css">#grid-row-1--3 .block--pink { grid-row: 1 / 3; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row: span 3;">grid-row: span 3;</code></p><div class="example-description"><p>The grid item spans <strong>3 rows</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row" id="grid-row-span-3"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-span-3{ grid-row:span 3;}</style><style type="text/css">#grid-row-span-3 .block--pink { grid-row: span 3; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row: 1 / span 4;">grid-row: 1 / span 4;</code></p><div class="example-description"><p>The grid items starts before the first row and spans for <strong>4 rows</strong>, creating a new one in the process.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row" id="grid-row-1--span-4"><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--pink"><strong>Target</strong></p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p><p class="block block--alpha">Item</p><p class="block block--beta">Item</p><p class="block block--yellow">Item</p><p class="block block--purple">Item</p></div></div></aside><style type="text/css">#grid-row-1--span-4{ grid-row:1 / span 4;}</style><style type="text/css">#grid-row-1--span-4 .block--pink { grid-row: 1 / span 4; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-row: header;">grid-row: header;</code></p><div class="example-description"><p>You can use an <strong>area name</strong> to "copy" its row start and end positions.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-row" id="grid-row-header"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--yellow">Main</p><p class="block block--purple">Footer</p><p class="block block--pink"><strong>Target</strong></p></div></div></aside><style type="text/css">#grid-row-header{ grid-row:header;}</style><style type="text/css">#grid-row-header{ grid-template-columns: 3fr 70fr;grid-template-rows: 50px 200px 50px;grid-template-areas: "header header header" "sidebar main main" "sidebar main main" "sidebar footer footer"; }</style><style type="text/css">#grid-row-header .block--alpha { grid-area: header; }#grid-row-header .block--beta { grid-area: sidebar; }#grid-row-header .block--yellow { grid-area: main; }#grid-row-header .block--purple { grid-area: footer; }#grid-row-header .block--pink { grid-row: header; }</style></section></section><section id="grid-template-areas" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-template-areas/" data-property-name="grid-template-areas" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-template-areas">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-template-areas" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-template-areas"><span>#</span>grid-template-areas</a></h2><div class="property-description"><p>Defines areas within a <strong>grid container</strong>. These areas can then be referenced when placing a <strong>grid item</strong>.</p></div></header><style type="text/css">.grid-template-areas { display: grid;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-areas: none;">grid-template-areas: none;</code></p><div class="example-description"><p>No area is defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-areas" id="grid-template-areas-none"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p></div></div></aside><style type="text/css">#grid-template-areas-none{ grid-template-areas:none;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-areas: "header header header" "sidebar main main";">grid-template-areas: "header header header" "sidebar main main";</code></p><div class="example-description"><p>You can use <strong>area names</strong> to specify which cells each grid item should occupy.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-areas" id="grid-template-areas-header-header-header-sidebar-main-main"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p></div></div></aside><style type="text/css">#grid-template-areas-header-header-header-sidebar-main-main{ grid-template-areas:"header header header" "sidebar main main";}</style><style type="text/css">#grid-template-areas-header-header-header-sidebar-main-main .block--alpha { grid-area: header; }#grid-template-areas-header-header-header-sidebar-main-main .block--beta { grid-area: sidebar; }#grid-template-areas-header-header-header-sidebar-main-main .block--pink { grid-area: main; }</style></section></section><section id="grid-template-columns" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-template-columns/" data-property-name="grid-template-columns" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-template-columns">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-template-columns" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-template-columns"><span>#</span>grid-template-columns</a></h2><div class="property-description"><p>Defines the columns of a <strong>grid container</strong>. You can specify the width of a column by using a keyword (like <code>auto</code>) or a length (like <code>10px</code>). The number of columns is determined by the number of <strong>values</strong> defined in the space-separated list.</p></div></header><style type="text/css">.grid-template-columns { display: grid;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-columns: none;">grid-template-columns: none;</code></p><div class="example-description"><p>No columns are defined, so you only have one.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-columns" id="grid-template-columns-none"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-columns-none{ grid-template-columns:none;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-columns: auto auto auto;">grid-template-columns: auto auto auto;</code></p><div class="example-description"><p>You can use the keyword <code>auto</code> so that each column resizes itself automatically.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-columns" id="grid-template-columns-auto-auto-auto"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-columns-auto-auto-auto{ grid-template-columns:auto auto auto;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-columns: 80px auto 1rem;">grid-template-columns: 80px auto 1rem;</code></p><div class="example-description"><p>You can mix the <strong>units</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-columns" id="grid-template-columns-80px-auto-1rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-columns-80px-auto-1rem{ grid-template-columns:80px auto 1rem;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-columns: 40px 1fr 2fr;">grid-template-columns: 40px 1fr 2fr;</code></p><div class="example-description"><p>You can use the <code>fr</code> <strong>flex unit</strong> to distribute the <strong>remaining space</strong> across all flex columns.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-columns" id="grid-template-columns-40px-1fr-2fr"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-columns-40px-1fr-2fr{ grid-template-columns:40px 1fr 2fr;}</style></section></section><section id="grid-template-rows" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-template-rows/" data-property-name="grid-template-rows" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-template-rows">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-template-rows" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-template-rows"><span>#</span>grid-template-rows</a></h2><div class="property-description"><p>Defines the rows of a <strong>grid container</strong>. You can specify the width of a row by using a keyword (like <code>auto</code>) or a length (like <code>10px</code>). The number of rows is determined by the number of <strong>values</strong> defined in the space-separated list.</p></div></header><style type="text/css">.grid-template-rows { display: grid;grid-template-columns: auto auto;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-rows: none;">grid-template-rows: none;</code></p><div class="example-description"><p>No rows are defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-rows" id="grid-template-rows-none"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--purple"><strong>5.</strong> Five</p><p class="block block--orange"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-rows-none{ grid-template-rows:none;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-rows: 120px auto 3rem;">grid-template-rows: 120px auto 3rem;</code></p><div class="example-description"><p>You can mix the <strong>units</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-rows" id="grid-template-rows-120px-auto-3rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--purple"><strong>5.</strong> Five</p><p class="block block--orange"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-rows-120px-auto-3rem{ grid-template-rows:120px auto 3rem;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-rows: 20px 1fr 2fr;">grid-template-rows: 20px 1fr 2fr;</code></p><div class="example-description"><p>You can use the <code>fr</code> <strong>flex unit</strong> to distribute the <strong>remaining space</strong> across all flex rows.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template-rows" id="grid-template-rows-20px-1fr-2fr"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--purple"><strong>5.</strong> Five</p><p class="block block--orange"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-rows-20px-1fr-2fr{ grid-template-rows:20px 1fr 2fr;}</style></section></section><section id="grid-template" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid-template/" data-property-name="grid-template" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-template">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-template" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid-template"><span>#</span>grid-template</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-rows" data-property-name="grid-template-rows">grid-template-rows</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-columns" data-property-name="grid-template-columns">grid-template-columns</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-area" data-property-name="grid-template-area">grid-template-area</a></code>.</p></div></header><style type="text/css">.grid-template { display: grid;grid-template-columns: auto auto auto;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template: none;">grid-template: none;</code></p><div class="example-description"><p>No rows, columns, or areas are defined.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template" id="grid-template-none"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-none{ grid-template:none;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template: 200px 1fr / 100px auto 3rem;">grid-template: 200px 1fr / 100px auto 3rem;</code></p><div class="example-description"><p>You can define <strong>rows</strong> first, <strong>columns</strong> second, by splitting them with a slash <code>/</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template" id="grid-template-200px-1fr--100px-auto-3rem"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--orange"><strong>5.</strong> Five</p><p class="block block--purple"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-template-200px-1fr--100px-auto-3rem{ grid-template:200px 1fr / 100px auto 3rem;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;">grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;</code></p><div class="example-description"><p>You can define both <strong>areas</strong> <em>and</em> <strong>rows</strong> and <strong>columns</strong> dimensions. In this case, each set of areas have a row size attached to it. The first row is <code>50px</code> high, the second one is <code>200px</code> high. The sidebar column is <code>100px</code> wide, while the main column's width is set to <code>auto</code> and takes up the remaining width.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid-template" id="grid-template-header-header-header-50px-sidebar-main-main-200px--100px-auto"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p></div></div></aside><style type="text/css">#grid-template-header-header-header-50px-sidebar-main-main-200px--100px-auto{ grid-template:"header header header" 50px "sidebar main main" 200px / 100px auto;}</style><style type="text/css">#grid-template-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--alpha { grid-area: header; }#grid-template-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--beta { grid-area: sidebar; }#grid-template-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--pink { grid-area: main; }</style></section></section><section id="grid" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/css-grid/">In collection: <strong>CSS Grid</strong> </a><a class="property-links-direct" href="{{site.url}}/property/grid/" data-property-name="grid" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid">Share</a> <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#grid"><span>#</span>grid</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-rows" data-property-name="grid-template-rows">grid-template-rows</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-columns" data-property-name="grid-template-columns">grid-template-columns</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-template-areas" data-property-name="grid-template-areas">grid-template-areas</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-auto-rows" data-property-name="grid-auto-rows">grid-auto-rows</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-auto-columns" data-property-name="grid-auto-columns">grid-auto-columns</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/property/grid-auto-flow" data-property-name="grid-auto-flow">grid-auto-flow</a></code>.</p></div></header><style type="text/css">.grid { display: grid;padding: 0; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid: "header header header" 50px "sidebar main main" 200px / 100px auto;">grid: "header header header" 50px "sidebar main main" 200px / 100px auto;</code></p><div class="example-description"><p>You can use it as <code>grid-template</code> by setting all <strong>explicit</strong> rows, columns, and areas.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid" id="grid-header-header-header-50px-sidebar-main-main-200px--100px-auto"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p><p class="block block--purple">Other</p></div></div></aside><style type="text/css">#grid-header-header-header-50px-sidebar-main-main-200px--100px-auto{ grid:"header header header" 50px "sidebar main main" 200px / 100px auto;}</style><style type="text/css">#grid-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--alpha { grid-area: header; }#grid-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--beta { grid-area: sidebar; }#grid-header-header-header-50px-sidebar-main-main-200px--100px-auto .block--pink { grid-area: main; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid: 200px 100px / auto-flow 30%;">grid: 200px 100px / auto-flow 30%;</code></p><div class="example-description"><p>You can combine <code>grid-template-rows</code> with <code>grid-auto-columns</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid" id="grid-200px-100px--auto-flow-30"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--purple"><strong>5.</strong> Five</p><p class="block block--orange"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-200px-100px--auto-flow-30{ grid:200px 100px / auto-flow 30%;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid: auto-flow 50px / 200px 100px;">grid: auto-flow 50px / 200px 100px;</code></p><div class="example-description"><p>You can combine <code>grid-auto-rows</code> with <code>grid-template-columns</code>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div grid" id="grid-auto-flow-50px--200px-100px"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p><p class="block block--yellow"><strong>4.</strong> Four</p><p class="block block--purple"><strong>5.</strong> Five</p><p class="block block--orange"><strong>6.</strong> Six</p></div></div></aside><style type="text/css">#grid-auto-flow-50px--200px-100px{ grid:auto-flow 50px / 200px 100px;}</style></section></section>