* { box-sizing: border-box; } @media screen and (width > 8in) and (max-width: 20in) { body { display: grid; grid-template-columns: 65fr 35fr; grid-gap: 1em; } #header { /* Place it in the parent element */ grid-column-start: 1; grid-column-end: 3; /* Define layout for the children elements */ display: grid; grid-template-columns: 8fr 2fr; } #header #header-text { /* Place it in the parent element */ grid-column-start: 1; grid-column-end: 2; /* Content styling */ padding-left: 1em; } #header #header-nav { /* Place it in the parent element */ grid-column-start: 2; grid-column-end: 3; } #main { /* Place it in the parent element */ grid-column-start: 1; grid-column-end: 3; /* Define layout for the children elements */ display: grid; grid-template-columns: 7fr 3fr; grid-gap: 5px; } #main #breadcrumbs { grid-column-start: 1; grid-column-end: 3; padding: 0 3px; } #main #main-content { /* Place it in the parent element */ grid-column-start: 1; grid-column-end: 2; grid-gap: 5px; /* Define layout for the children elements */ max-width: 70%; } #main #sidebar-content { grid-column-start: 2; grid-column-end: 3; } }