1main > *, #page-core { 2 min-width: 0; /** not auto */ 3} 4 5 6@media (min-width: 768px) { 7 8 #page-core { 9 display: grid; 10 gap: 1.5rem; 11 grid-template-areas: "page-side page-main"; 12 grid-template-columns: minmax(min-content,1fr) 3fr; 13 align-content: flex-start 14 } 15 16 #page-side { 17 grid-area: page-side; 18 } 19 20 #page-main { 21 grid-area: page-main; 22 } 23 24} 25 26 27@media (min-width: 992px) { 28 29 #page-core { 30 grid-template-columns: minmax(min-content,1fr) 5fr; 31 } 32 33 main { 34 35 grid-area: page-main; 36 display: grid; 37 grid-template-columns: [main] 7fr [side] minmax(auto,2fr); 38 grid-auto-flow: row; 39 gap: 1rem; 40 grid-template-areas: unset; 41 margin-left: 1rem; 42 margin-right: 1rem; 43 align-content: flex-start 44 45 } 46 47 #main-toc { 48 grid-column: side; 49 grid-row: 1 / span 5; 50 position: sticky; 51 top: 5rem; 52 z-index: 2; 53 height: calc(100vh - 5rem); 54 overflow-y: auto; 55 } 56 57 #main-header { 58 grid-column: main; 59 } 60 61 #main-content { 62 grid-column: main; 63 } 64 65 #main-footer { 66 grid-column: main; 67 } 68 69 #main-side { 70 grid-area: unset; 71 } 72 73} 74