TIL gap in CSS

POSTED ON: Apr 04, 2021

Say you want elements to be 1rem distant apart, except for the last element.

This is the lame-o classic hacky way to do it.

div > *:not(:last-child) {
    margin-bottom: 1rem;
  }

With Flex and Grid, you can use gap.

div {
  gap: 1rem;
}

It's so nice.

See the Pen margin-bottom vs gap by rockykev (@rockykev) on CodePen.

VIA
https://mobile.twitter.com/brad_frost/status/1359953369369088003

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023