Easier math with Grid

I've noticed something else while using CSS Grid: alignment math seems to be easier. I assume this is because we plan the grid at a higher level on parent elements.

If I want to add padding to an element while still having everything line up, I have a couple options.

I can do some simple math based on the number of columns I've used:

$gap: 1rem;
// Math: Width - (total gap widths used) / (total columns) + (1 gap width)
padding: $gap calc((100% - #{$gap * 5})/6 + #{$gap});

See the Pen Grid padding based on known column count by Dave Cross (@davecross) on CodePen.

Or I can add another grid inside the child container to do the math for me:

$gap: 1rem;
display: grid;
grid-gap: $gap;
grid-template-columns: repeat(6, 1fr);
grid-template-areas:". a a a a .";

> :first-child {grid-area: a;}

See the Pen Grid in grid based on known column count by Dave Cross (@davecross) on CodePen.

Getting columns in child elements is also pretty easy with CSS Columns and column-gap:

$gap: 1rem;
columns: 2;
column-gap: $gap;

See the Pen Grid with CSS columns by Dave Cross (@davecross) on CodePen.

Tip

You should probably add break-inside: avoid; to CSS column children so they wrap to next column as expected.

If you need to have child elements line up vertically, that math is easy too:

// On the flex container, add `justify-contents: space-between`
$gap: 1rem;
// Math: (100% / column-count) - (gap-width / (total columns / total gaps)
flex-basis: calc(50% - #{$gap/2});

See the Pen Grid with Flexbox columns by Dave Cross (@davecross) on CodePen.

Everything seems to get easier when using CSS Grid.