bug - rates.html - grid issue - How to use a CSS grid layout with 12 columns in HTML and place something in the middle of the webpage.

[r9young]

[r9young]

.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 */
}