(I am currently in the process of upgrading the design of this data entry page from a basic CSS/HTML table layout to something more advanced, utilizing CSS Grid layout).
Following common conventions, I have structured it into 12 columns. Each entry field is accompanied by a label that shares the same width. Therefore, my CSS code at present is quite repetitive:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 10px;
}
#SigNameLabel {
grid-column: 1 / 13;
grid-row: 2;
}
#SignatureName {
grid-column: 5 / 13;
grid-row: 2;
}
#PaymentNoLabel {
grid-column: 1 / 13;
grid-row: 3;
}
#PaymentNo {
grid-column: 5 / 13;
grid-row: 3;
}
#CurrencyLabel {
grid-column: 1 / 13;
grid-row: 4;
}
#Currency {
grid-column: 5 / 13;
grid-row: 4;
}
* {
border: 1px solid #999;
} However, is there a way to streamline the CSS and make it less verbose by having it adjust based on the HTML structure? For instance, rather than assigning unique IDs to each label as seen here, could we give them a class like left-hand-column, apply grid-column: 1 / 13 to all, and somehow align their grid-row with the corresponding data field DIV?