layout.css (1564B)
1 main.grid { 2 grid-template-rows: minmax(8em, 16em) minmax(8em, 16em) auto; /* TODO */ 3 grid-template-columns: 3fr 1fr; 4 } 5 6 #banner { 7 height: 8em; 8 } 9 10 #banner.grid { 11 grid-template-rows: 1fr 1fr; 12 grid-template-columns: 3fr 1fr 1fr; 13 } 14 15 #banner > #breaking-news { 16 grid-row: 1 / span 2; 17 grid-column: 1; 18 } 19 20 #banner > #breaking-news-1 { 21 grid-row: 1; 22 grid-column: 2 / span 2; 23 } 24 25 #banner > #breaking-news-2 { 26 grid-row: 2; 27 grid-column: 2; 28 } 29 30 #banner > #breaking-news-3 { 31 grid-row: 2; 32 grid-column: 3; 33 } 34 35 #content { 36 height: 80em; 37 background-style: solid; 38 background-color #f00; 39 40 /* TODO */ 41 } 42 43 #sidebar { 44 /* TODO */ 45 } 46 47 /* css selector explanation 48 * -- 49 * main.grid > #content { ... } 50 * -- 51 * - given an element of type `main` with the class `grid` 52 * - for its direct child with id `content` 53 */ 54 55 main.grid > #banner { 56 grid-row: 1; 57 grid-column: 1 / -1; 58 } 59 60 /* on mobile ... */ 61 @media screen and (max-width:576px) { 62 /* the sidebar moves to immediately under the navbar */ 63 main.grid > #sidebar { 64 grid-row: 2 / span 1; 65 grid-column: 1 / span 2; 66 } 67 68 /* the content comes after the "sidebar" */ 69 main.grid > #content { 70 grid-row: 3; 71 grid-column: 1 / span 2; 72 } 73 } 74 75 /* on desktop ... */ 76 @media screen and (min-width:577px) { 77 /* the sidebar sits on the right-hand column (25% width) */ 78 main.grid > #sidebar { 79 grid-row: 2 / span 1; 80 grid-column: 2 / span 1; 81 } 82 83 /* the contents sit on the left-hand column (75% width) */ 84 main.grid > #content { 85 grid-row: 2 / span 2; 86 grid-column: 1 / span 1; 87 } 88 }