85 lines
2.0 KiB
CSS
85 lines
2.0 KiB
CSS
|
main{
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(6, 1fr);
|
||
|
|
grid-auto-rows: minmax(100px, 1fr);
|
||
|
|
gap: 1rem;
|
||
|
|
grid-auto-flow: dense;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* MOBILE */
|
||
|
|
.col-1 {grid-column: span 1;}
|
||
|
|
.col-2 {grid-column: span 2;}
|
||
|
|
.col-3 {grid-column: span 3;}
|
||
|
|
.col-4 {grid-column: span 4;}
|
||
|
|
.col-5 {grid-column: span 5;}
|
||
|
|
.col-6 {grid-column: span 6;}
|
||
|
|
|
||
|
|
.row-2{grid-row: span 2;}
|
||
|
|
.row-3{grid-row: span 3;}
|
||
|
|
.row-4{grid-row: span 4;}
|
||
|
|
.row-5{grid-row: span 5;}
|
||
|
|
|
||
|
|
|
||
|
|
main section {
|
||
|
|
grid-column: span 6; /* Default för mobil. Upptar hela bredden. */
|
||
|
|
padding: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/** Tablets */
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
[class*='col-t-'] { /* Reset av row-span*/
|
||
|
|
grid-row: span 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-t-1 {grid-column: span 1;}
|
||
|
|
.col-t-2 {grid-column: span 2;}
|
||
|
|
.col-t-3 {grid-column: span 3;}
|
||
|
|
.col-t-4 {grid-column: span 4;}
|
||
|
|
.col-t-5 {grid-column: span 5;}
|
||
|
|
.col-t-6 {grid-column: span 6;}
|
||
|
|
|
||
|
|
.row-t-2{grid-row: span 2;}
|
||
|
|
.row-t-3{grid-row: span 3;}
|
||
|
|
.row-t-4{grid-row: span 4;}
|
||
|
|
.row-t-5{grid-row: span 5;}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** desktop */
|
||
|
|
@media (min-width: 980px) {
|
||
|
|
[class*='col-d-'] { /* Reset av row-span*/
|
||
|
|
grid-row: span 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-d-1 {grid-column: span 1;}
|
||
|
|
.col-d-2 {grid-column: span 2;}
|
||
|
|
.col-d-3 {grid-column: span 3;}
|
||
|
|
.col-d-4 {grid-column: span 4;}
|
||
|
|
.col-d-5 {grid-column: span 5;}
|
||
|
|
.col-d-6 {grid-column: span 6;}
|
||
|
|
|
||
|
|
.row-d-2{grid-row: span 2;}
|
||
|
|
.row-d-3{grid-row: span 3;}
|
||
|
|
.row-d-4{grid-row: span 4;}
|
||
|
|
.row-d-5{grid-row: span 5;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/** Large desktop */
|
||
|
|
@media (min-width: 1200px) {
|
||
|
|
[class*='col-w-'] { /* Reset av row-span*/
|
||
|
|
grid-row: span 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-w-1 {grid-column: span 1;}
|
||
|
|
.col-w-2 {grid-column: span 2;}
|
||
|
|
.col-w-3 {grid-column: span 3;}
|
||
|
|
.col-w-4 {grid-column: span 4;}
|
||
|
|
.col-w-5 {grid-column: span 5;}
|
||
|
|
.col-w-6 {grid-column: span 6;}
|
||
|
|
|
||
|
|
.row-w-2{grid-row: span 2;}
|
||
|
|
.row-w-3{grid-row: span 3;}
|
||
|
|
.row-w-4{grid-row: span 4;}
|
||
|
|
.row-w-5{grid-row: span 5;}
|
||
|
|
}
|