41 lines
627 B
CSS
41 lines
627 B
CSS
.left-bar {
|
|
grid-area: lb;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.main-bar {
|
|
grid-area: main;
|
|
}
|
|
|
|
.right-bar {
|
|
grid-area: rb;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.column-layout-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "main" "rb";
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.right-bar {
|
|
max-width: 100%;
|
|
}
|
|
.column-layout-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 1fr);
|
|
grid-template-areas:
|
|
"lb main"
|
|
"lb rb";
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.column-layout-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-areas: "lb main rb";
|
|
}
|
|
}
|