Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save katsampukas/e3977583f9aab610379f191577e67fc7 to your computer and use it in GitHub Desktop.
Save katsampukas/e3977583f9aab610379f191577e67fc7 to your computer and use it in GitHub Desktop.
.three_cols {
// min-width: 1020px
@media (min-width: $bp-layout-6) {
/////////////////////////
// CSS Grid Demonstration
/////////////////////////
main {
display: grid;
grid-template-columns: calc(250px + 3%) auto;
grid-template-rows: 300px auto 300px;
}
.wrapper {
grid-column: 2 / 3;
grid-row: 1 / 4;
}
.main-sidebar {
grid-column: 1;
grid-row: 2 / 4;
}
.secondary-sidebar {
display: block;
grid-column: 1;
grid-row: 1 / 2;
> div {
background: antiquewhite;
}
}
}
/////////////////////////
// CSS Grid Demonstration
/////////////////////////
@media (min-width: 1100px) {
main {
grid-template-rows: auto 300px;
}
.main-sidebar {
grid-row: 1 / 2;
}
.secondary-sidebar {
grid-row: 2;
}
}
/////////////////////////
// CSS Grid Demonstration
/////////////////////////
@media (min-width: 1200px) {
main {
grid-template-rows: 300px auto;
grid-template-columns: minmax(calc(250px + 3%), 320px) auto;
}
.wrapper {
grid-column: 2 / 3;
grid-row: 2 / 4;
}
.secondary-sidebar {
grid-column: 2 / 3;
grid-row: 1;
}
}
/////////////////////////
// CSS Grid Demonstration
/////////////////////////
@media (min-width: 1300px) {
main {
grid-template-rows: 300px auto;
grid-template-columns: minmax(calc(250px + 3%), 320px) auto 320px;
}
.wrapper {
grid-column: 2 / 3;
grid-row: 1 / 4;
}
.secondary-sidebar {
grid-column: 3 / 4;
grid-row: 1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment