aside {
grid-area: side;
}
main {
grid-area: main;
}
.wrapper {
min-height: 100%; width: 100%; // Main grid is only activated on large screens @media screen and (min-width: $large-phone) { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "side side side main main main main main main"; } @media screen and (min-width: $ipad) { grid-template-areas: "side side side main main main main main main"; } @media screen and (min-width: $desktop) { grid-template-areas: "side side main main main main main main main"; } @media screen and (min-width: $widescreen) { grid-template-areas: "side main main main main main main main main"; }
}
// For items on list pages grid {
@media screen and (min-width: $large-phone) { margin: 2rem 0 4rem 0; } margin: 1.5rem 0;
}
list-grid {
display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-rows: auto; li { background-color: $tile-background-color; border: 1px solid $border-color; border-radius: $border-radius; list-style-type: none; padding: 1rem; -webkit-box-shadow: $drop-shadow; -moz-box-shadow: $drop-shadow; box-shadow: $drop-shadow; word-wrap: break-word; a { text-decoration: none; } }
}