css split element into multiple columns

css:


.columns {

    column-count: 3;

    column-gap: 40px;

    column-rule: 4px solid #999;

}



.columns p {

    break-inside: avoid;

    margin-bottom: 15px;

}

html:


<h3>css columns test</h3>



<div class="columns">

  <h3>Alice in Wonderland by Lewis Carroll:</h3>

  <p>Then they both bowed low, and their curls got entangled together.</p>

  <p>Alice laughed so much at this, that she had to run back into the wood for fear of their hearing her; and when she next peeped out the Fish-Footman was gone, and the other was sitting on the ground near the door, staring stupidly up into the sky.</p>

  <p>Alice went timidly up to the door, and knocked.</p>

  <p>'There's no sort of use in knocking,' said the Footman, 'and that for two reasons. First, because I'm on the same side of the door as you are; secondly, because they're making such a noise inside, no one could possibly hear you.' And certainly there was a most extraordinary noise going on within—a constant howling and sneezing, and every now and then a great crash, as if a dish or kettle had been broken to pieces.</p>

  <p>'Please, then,' said Alice, 'how am I to get in?'</p>

  <p>'There might be some sense in your knocking,' the Footman went on without attending to her, 'if we had the door between us. For instance, if you were INSIDE, you might knock, and I could let you out, you know.' He was looking up into the sky all the time he was speaking, and this Alice thought decidedly uncivil. 'But perhaps he can't help it,' she said to herself; 'his eyes are so VERY nearly at the top of his head. But at any rate he might answer questions.—</p>

  <p>How am I to get in?' she repeated, aloud.</p>

  <p>'I shall sit here,' the Footman remarked, 'till tomorrow—'</p>

  <p>At this moment the door of the house opened, and a large plate came skimming out, straight at the Footman's head: it just grazed his nose, and broke to pieces against one of the trees behind him.</p>

  <p>'—or next day, maybe,' the Footman continued in the same tone, exactly as if nothing had happened.</p>

  <p>'How am I to get in?' asked Alice again, in a louder tone.</p>

</div>

Leave a Comment