doc_grid_area_gridline_names.html (1328B)
1 <!doctype html> 2 <style type='text/css'> 3 /* Implicit gridlines created from explicit grid areas. */ 4 .wrapperA { 5 display: grid; 6 grid-template-columns: repeat(3, 1fr); 7 grid-auto-rows: minmax(100px, auto); 8 grid-template-areas: 9 "header header header" 10 "main main main"; 11 } 12 13 .header { 14 grid-column: header-start / header-end; 15 grid-row: header-start / header-end; 16 } 17 18 .main { 19 grid-area: main; 20 } 21 22 /* Implicit grid areas created from explicit gridlines */ 23 .wrapperB { 24 display: grid; 25 grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end main-end]; 26 grid-template-rows: [main-start] 100px [content-start] 100px [content-end main-end]; 27 } 28 29 .contentArea { 30 grid-column: content-start / content-end; 31 grid-row: content-start / content-end; 32 } 33 34 .wrapperC { 35 display: grid; 36 grid-template-columns: [a-start b-end] 1fr [c]; 37 } 38 39 .a { 40 grid-column: a-start / a-end; 41 } 42 43 .b { 44 grid-column: b-start / b-end; 45 } 46 </style> 47 <div> 48 <div class="wrapperA"> 49 <div class="header">Header</div> 50 <div class="main">Content</div> 51 </div> 52 <div class="wrapperB"> 53 <div class="contentArea">Implicit area named "content".</div> 54 </div> 55 <div class="wrapperC"> 56 <div class="a">A.</div> 57 <div class="b">B.</div> 58 </div> 59 </div>