#main-sidebar-container { display: grid; grid-template-columns: auto; grid-template-areas: "main" "sidebar"; grid-row-gap: 1rem; } #main-sidebar-container article { grid-area: main; } #main-sidebar-container aside { grid-area: sidebar; } @media (min-width: 1024px) { #main-sidebar-container { grid-template-columns: 224px auto; grid-template-areas: "sidebar main"; grid-column-gap: 1rem; } }