layout/reftests/css-grid/grid-placement-definite-001.html

   1 <!DOCTYPE HTML>
   2 <html><head>
   3     <meta charset="utf-8">
   4     <title></title>
   5     <style type="text/css">
   6
   7 .grid {
   8  display: grid;
   9  grid-template-areas:
  10 '. . a a a .'
  11 '. . a a a .'
  12 '. b b . . .'
  13 ;
  14   border: 10px solid green;
  15   grid-template-columns: 20px 20px 20px 20px;
  16   grid-template-rows: 20px 20px 20px;
  17   grid-auto-flow: column dense;
  18   grid-auto-columns: 20px;
  19   grid-auto-rows: 20px;
  20   font-size:12px;
  21 }
  22
  23 span {
  24   background: lime;
  25   border: 1px solid black;
  26 }
  27
  28 .a {
  29   grid-area: a;
  30 }
  31 .b {
  32   grid-column: 2 / span 3;
  33   grid-row: b;
  34 }
  35 .c {
  36   grid-column: span 3;
  37 }
  38 .d {
  39   grid-row: span 3;
  40 }
  41     </style>
  42 </head>
  43 <body>
  44
  45 <div class=grid>
  46 <span class=a>a</span>
  47 <span class=b>b</span>
  48 <span class=c>c</span>
  49 <span class=d>d</span>
  50 </div>
  51
  52 </body>
  53 </html>