CSS - Block Box - Columns Property

About

The content of block level box may be laid out in column with the column-count property.

Example Three columns

Column count will create three columns for the content of a block box.

#ipsum {
   column-count: 3;
   display: block;
}
<div id="ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>





Discover More
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: * block formatting * flow layout The component are laid...
Css Flex Align Content
CSS - Flex Box

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment. flex means: flexible layout as flexible size Flex layout is superficially similar...
Css Flex Align Content
CSS Flex - flex-direction (row or column)

The flex-direction layout the children of a flex container in: row or column column layout flex-direction is part of what's called the flex-flow. This three examples are based on a row of div...



Share this page:
Follow us:
Task Runner