Диапазон строк CSS Grid ⇐ CSS

[Anonymous]

В приведенном ниже HTML-коде я пытаюсь сделать так, чтобы ячейка «Оплачено» занимала 4 строки. Эта ячейка должна начинаться в той же строке, что и «Номер и дата контракта», и занимать 4 строки, перекрывая ячейку «Имя и адрес получателя платежа» на две строки.
Если вы откроете эту страницу в браузере, ячейка «Кем оплачено» будет занимать только 2 строки.
Есть идеи, почему и как это исправить

Код: Выделить всё

SF 1034 - Public Voucher for Purchases and Services

:root {
--border-color: #000;
--font-family: Arial, sans-serif;
--label-font-size: 0.65rem;
--data-font-size: 0.9rem;
--title-font-size: 1.2rem;
}

body {
font-family: var(--font-family);
margin: 0;
padding: 1rem;
background-color: #f4f4f4;
color: #333;
}

.form-container {
max-width: 8.5in;
height: 11in;
margin: auto;
background: #fff;
border: 1px solid var(--border-color);
padding: 9pt;
box-sizing: border-box;
display: flex;
}

.form-body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

.flex-grow-1 {
flex-grow: 1;
}

/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0;
border: 1px solid var(--border-color);
border-top: 0;
}

.form-body > .grid:first-child {
border-top: 1px solid var(--border-color);
}

.grid-cell {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 0.25rem 0.5rem;
}

.grid .grid-cell:last-child { border-right: 0; }

/* Spanning columns */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Spanning rows */
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }

/* Utility Classes */
.text-center { text-align: center; }
.font-bold { font-weight: bold; }
.font-italic { font-style: italic; }
.label {
font-size: var(--label-font-size);
text-transform: uppercase;
}
.content {
font-size: var(--data-font-size);
padding-top: 0.5rem;
}
.min-h-large { min-height: 8rem; }

.table-header {
font-size: 0.7rem;
font-weight: bold;
text-align: center;
}

@media print {
@page {
margin: 0.5in;
}
body {
background-color: #fff; padding: 0; margin: 0;
}
.form-container {
max-width: 100%; width: 100%; height: 100%;
border: none; box-shadow: none; padding: 0;
}
:root {
--label-font-size: 8pt; --data-font-size: 10pt; --title-font-size: 12pt;
}
.grid, .grid-cell, .form-body >  .grid:first-child {
border-color: #000;
}
}








Standard Form 1034
Revised October 1987
Department of the Treasury

PUBLIC VOUCHER FOR PURCHASES AND
SERVICES OTHER THAN PERSONAL

Voucher Number





U.S. DEPARTMENT, BUREAU, OR ESTABLISHMENT AND LOCATION



Date Voucher Prepared



Schedule Number



Contract Number and Date



Paid By



Requisition Number and Date



Payee's Name and Address



Date Invoice Received



Discount Terms



Payee's Account Number

Подробнее здесь: https://stackoverflow.com/questions/798 ... d-row-span