Grid Columns & Rows

Columns

Use the grid-template-columns property to set the width of each column. You must calculate the value of the gap and remove this from the percentage calculation, otherwise the grid elements will overflow from the parent elements.

.gridContainer {
    display: grid;
    gap: 12px;
    grid-template-columns: 
    calc(50% - 6px) 
    calc(50% - 6px);
}

Fractional Units

It's common to use fractional units units when setting grid columns widths. A fractional unit represenets a fraction of the available space. The larger the number, the larger the space it will consume.

grid-template-columns: 1fr 3fr 1fr;

Rows

grid-template-rows: 1fr 3fr 1fr;