|
| 1 | +--- |
| 2 | +layout: single |
| 3 | +property_name: grid-auto-columns |
| 4 | +--- |
| 5 | + |
| 6 | +<section id="grid-auto-columns" class="property"> |
| 7 | + <header class="property-header"> |
| 8 | + <nav class="property-links"> |
| 9 | + <a class="property-collection" href="{{site.url}}/css-grid/"> |
| 10 | + In collection: <strong>CSS Grid</strong> |
| 11 | + </a> |
| 12 | + <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> |
| 13 | + <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-auto-columns">Share</a> |
| 14 | + <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a> |
| 15 | + <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> |
| 16 | + </nav> |
| 17 | + <h2 class="property-name"> |
| 18 | + <a href="#grid-auto-columns"><span>#</span>grid-auto-columns</a> |
| 19 | + </h2> |
| 20 | + <div class="property-description"> |
| 21 | + <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> |
| 22 | + |
| 23 | + </div> |
| 24 | + |
| 25 | + </header> |
| 26 | + |
| 27 | + <style type="text/css">.grid-auto-columns { display: grid;padding: 0; }</style> |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | + <section class="example"> |
| 33 | + <header class="example-header"> |
| 34 | + <p class="example-name"> |
| 35 | + <code class="example-default" data-tooltip="This is the property's default value">default</code> |
| 36 | + |
| 37 | + |
| 38 | + <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-columns: auto;">grid-auto-columns: auto;</code> |
| 39 | + </p> |
| 40 | + <div class="example-description"> |
| 41 | + <p>The implicity-created columns have an <code>auto</code> size.</p> |
| 42 | + |
| 43 | + </div> |
| 44 | + </header> |
| 45 | + |
| 46 | + <aside class="example-preview"> |
| 47 | + <div class="example-browser"><i></i><i></i><i></i></div> |
| 48 | + <div class="example-output"> |
| 49 | + <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> |
| 50 | + </div> |
| 51 | + </aside> |
| 52 | + <style type="text/css">#grid-auto-columns-auto{ grid-auto-columns:auto;}</style> |
| 53 | + </section> |
| 54 | + <section class="example"> |
| 55 | + <header class="example-header"> |
| 56 | + <p class="example-name"> |
| 57 | + |
| 58 | + |
| 59 | + <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-auto-columns: 100px;">grid-auto-columns: 100px;</code> |
| 60 | + </p> |
| 61 | + <div class="example-description"> |
| 62 | + <p>Here we combine <code>grid-template-areas: "header header header" "sidebar main main"</code> with <code>grid-template-columns: 50px 200px</code>.</p> |
| 63 | +<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> |
| 64 | +<p>As a result, the third column width takes its value from the <code>grid-auto-columns</code> property: <code>100px</code>.</p> |
| 65 | + |
| 66 | + </div> |
| 67 | + </header> |
| 68 | + |
| 69 | + <aside class="example-preview"> |
| 70 | + <div class="example-browser"><i></i><i></i><i></i></div> |
| 71 | + <div class="example-output"> |
| 72 | + <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> |
| 73 | + </div> |
| 74 | + </aside> |
| 75 | + <style type="text/css">#grid-auto-columns-100px{ grid-auto-columns:100px;}</style> |
| 76 | + <style type="text/css">#grid-auto-columns-100px{ grid-template-areas: "header header header" "sidebar main main";grid-template-columns: 50px 200px; }</style> |
| 77 | + <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> |
| 78 | + </section> |
| 79 | + |
| 80 | +</section> |
0 commit comments