grid-auto-explicit-rows-001.html (1366B)
1 <!doctype html> 2 <title>grid-auto applies to explicit rows</title> 3 4 <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> 5 <link rel=help href="https://www.w3.org/TR/css-grid-1/#implicit-grids"> 6 <meta name=assert content="grid-auto-rows/columns should dictate the size of all rows past grid-template-rows/columns, even if they are part of the explicit grid as established by grid-template-areas; they're not just limited to implicit tracks."> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 <style> 12 .grid { 13 display: grid; 14 grid-template-areas: "a b c" "d e f" "g e h"; 15 grid-template-rows: 11px 13px; 16 grid-auto-rows: 17px 19px; 17 grid-template-columns: 23px 29px; 18 grid-auto-columns: 31px 37px; 19 } 20 21 .grid > div { 22 background: rgba(0, 0, 0, .2); 23 } 24 #c1 { grid-area: 1 / 1 / 2 / 2; } 25 #c2 { grid-area: 1 / 1 / 3 / 3; } 26 #c3 { grid-area: 1 / 1 / 4 / 4; } 27 #c4 { grid-area: 1 / 1 / 5 / 5; } 28 </style> 29 30 <div class=grid> 31 <div id=c1 data-expected-width=23 data-expected-height=11></div> 32 <div id=c2 data-expected-width=52 data-expected-height=24></div> 33 <div id=c3 data-expected-width=83 data-expected-height=41></div> 34 <div id=c4 data-expected-width=120 data-expected-height=60></div> 35 </div> 36 37 <script> 38 checkLayout('.grid'); 39 </script>