WebServ/www/public/M0/03/css/gridCSS.css
2024-08-22 12:58:09 +02:00

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;}
}