Creating text columns

Creating nice, even columns of text with CSS is easy.

Scream for no reason at 4 am sweet beast, be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day and love you, then bite you love me! Hiss and stare at nothing then run suddenly away. Making sure that fluff gets into the owner's eyes intently stare at the same spot why can't i catch that stupid red dot kitty poochy.

First, create an element of text:

<div class="columns">
  <p>My text here...</p>
</div>

Then, you can apply the columns CSS property. You can adjust the number of columns as needed.

.columns {
  columns: 2;
  padding: 15px; /* adds padding between the text and the border */
}
/* this is extra */
.columns p {
  margin-top: 0;
}

✏️ Tip

Since <p></p> elements have a little bit of margin at the top, I added a rule to remove that so the columns would be even.

You can adjust the space between your columns with column-gap:

.columns {
  columns: 2;
  padding: 15px;
  column-gap: 50px;
}

You can also add a border or rule between your columns to visually separate them.

.columns {
  columns: 2;
  padding: 15px;
  column-rule: 1px solid gray;
}