Grid Dividers

Grid Dividers are a very popular styling option these days. It allows you to create a border around your grid cells.

💡

This is a hacky solution. There is not setting called gap-color.

You have to set the parent background-color to the desired divider color. You then set the background-color of the children to match the background color of the page. Reduce the gap to the desired size and that is your new grid-divider.

.parent {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        background-color: var(--color-gray-500);
    }

    .children {
        background-color: var(--color-backdrop);
    }