Today I Learned - Rocky Kev

TIL column-count

POSTED ON:

TAGS: css codepen html webdev

Using the column-count property you can break an element’s content into a specified number of columns.

For instance, if you want to break the content inside a

element into 2 columns, you can do it like so.

p {
  column-count: 2;
}

See the Pen The `column-count` property by Amit Merchant (@amit_merchant) on CodePen.

It can also handle nestled content.

.nestled-content {
  column-count: 2;
}

See the Pen The `column-count` property - Nested behaviour by Amit Merchant (@amit_merchant) on CodePen.

And additional rules.

p {
  column-count: 2;
  column-gap: 50px;
  column-rule: 2px solid purple;
}

Via Break HTML content into newspaper-like columns using pure CSS

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)')