Today I Learned - Rocky Kev

TIL column gap for newspaper look

POSTED ON:

TAGS: css codepen responsive webdev mdn

Use column-count and column-gap to give it that sweet newspaper look.

You can also use flex/grid if you want to control the elements inside.

/* Where the magic happens */
.column-gap-single {
  column-count: 4;
  column-gap: 10px;
}

.column-gap-flex {
    display: flex;
    column-gap: 10px;
}

.column-gap-flex > p {
  flex-basis: 0;
  flex-grow: 1;
}

.column-gap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 50px;

}

REFERENCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

See the Pen Using column-gap with long text by rockykev (@rockykev) on CodePen.

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.

TIL Logical Properties

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

TIL Using pseudo-classes in your querySelector!

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