Open r9young opened 3 months ago
.body-grid {
display: grid;
grid-template-columns: repeat(12, 1fr); /* Creates 12 proportional columns */
grid-template-rows: repeat(12, 1fr); /* Creates 12 proportional rows */
gap: 16px; /* Gap between columns - best in absolute value */
margin: 2vh 2vw; /* Adds space on all sides proportional to the screen size */
}
.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; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.row-1 { grid-row: span 1; }
.row-2 { grid-row: span 1; }
.row-3 { grid-row: span 1; }
.row-4 { grid-row: span 1; }
.row-5 { grid-row: span 12; }
.row-6 { grid-row: span 12; }
.row-7 { grid-row: span 12; }
.row-8 { grid-row: span 12; }
.row-9 { grid-row: span 1; }
.row-10 { grid-row: span 1; }
.row-11 { grid-row: span 1; }
.row-12 { grid-row: span 1; }
.centered {
grid-column: 5 / span 4; /* Starts at column 5 and spans 4 columns (5, 6, 7, 8) */
grid-row: 5 / span 4; /* Starts at row 5 and spans 4 rows (5, 6, 7, 8) */
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* Optional: add background color for visibility */
}
/* Placeholder for empty rows and columns */
.placeholder {
background-color: black; /* Optional: can be removed or styled */
}