At work I had a simple task to create a variant of an existing template, where the new template would incorporate a few uniform columns. The columns were to be the same size, regardless of if they were empty, and not over extend to keep in-line with the other content boxed on the page.
This was achieved using a grid display and using the fractional unit in the grid-template-columns property.
.l-grid-col-2-m {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em;
@media(max-width:@break-point-laptop) {
grid-template-columns:auto;
}
}
Reference
https://css-tricks.com/introduction-fr-css-unit/
Created: 05-Apr-2024