column-gap

column-gap

by fatihhayri

HTML

<div id="cokluKolon">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui dolor. Phasellus eros metus, condimentum ac condimentum a, egestas sit amet lectus. Mauris quis quam eu nisl sollicitudin viverra. Fusce rutrum justo vel lorem tincidunt nec placerat dolor adipiscing. Phasellus sagittis tortor non tellus auctor porta. Proin vehicula malesuada sagittis. Vestibulum interdum congue consectetur. Etiam vulputate libero posuere magna commodo sodales. Curabitur euismod pharetra velit aliquam luctus. Pellentesque velit augue, dapibus ac rhoncus eget, consectetur quis lacus. Vestibulum faucibus suscipit leo, quis cursus dolor facilisis non. Etiam tortor sem, tempus sed posuere sed, auctor sit amet felis.</p>
    
    <p>Nam sit amet tellus vel lorem adipiscing ornare. Proin quis tellus non felis pulvinar lobortis sit amet id erat. In hac habitasse platea dictumst. Mauris a ante a dui vehicula mattis. Ut aliquam suscipit metus id gravida. Nullam vestibulum lacinia nisi vitae condimentum. Aenean placerat pulvinar odio, ac mattis massa vehicula id. Maecenas in mauris vitae augue malesuada malesuada. Maecenas vel mauris vitae felis aliquet egestas. Aenean ullamcorper enim at leo placerat aliquet. Maecenas vitae mauris eget leo accumsan sagittis facilisis sit amet ante. Etiam tristique magna vel est egestas viverra. Suspendisse hendrerit lacinia sagittis.</p>
    
    <p>Nunc dapibus condimentum purus sed lacinia. Aenean non lacus urna. Cras mollis diam non urna posuere vestibulum. Sed eu sem massa, sed accumsan orci. Fusce ac quam non ligula vulputate consectetur ac in turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In fermentum bibendum tristique.</p>
    
    <p>Ut dictum, tellus blandit hendrerit luctus, nisi tortor lacinia quam, a tempus massa nisl quis elit. Donec ut neque ante. Pellentesque et ante turpis, id consectetur ligula. Phasellus sit amet metus nunc. Ut elit quam,...

CSS

#cokluKolon{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;        
}