Kolumny w CSS to rzecz wręcz prozaiczna, lecz czasami bardzo przydatna. Jeśli chcemy aby nasz tekst ładnie się układał, bez używanie tabel czy pozycjonowanych divów po prostu użyjmy poniższych poleceń:

<style>

                                    .face {
                                        margin: 40px;
                                        column-count: 6; //Ilość kolumn
                                        column-gap: 150px; // Odstęp między kolumnami
                                        column-rule: 1px solid black; // linia między kolumnami
                                    }
</style>

Takie polecenie sprawi iż w wszystko z klasą .face, będzie wyświetlało się w 6 kolumnach, które będą posiadały odstęp od siebie o szerokości 150 pikseli, a pośrodku będzie czarna linia.

Wartościami można dowolnie mieszać.

Przykład poniżej.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget pellentesque dui. Curabitur scelerisque ligula sit amet magna faucibus, nec finibus justo finibus. Sed elit erat, sagittis id egestas vitae, lobortis et mauris. Nullam non tempus tortor. Pellentesque odio neque, commodo sit amet suscipit vitae, tempus ullamcorper orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan faucibus eleifend. Integer ac rutrum ligula. Cras porta tellus felis, vel pharetra nulla tempor vel. Nam tristique vel elit in commodo. Duis consectetur semper ipsum, ut euismod lectus tincidunt sit amet. Cras ac dui ac velit interdum pretium.
Donec felis lorem, fermentum at sapien ac, fringilla volutpat ipsum. Maecenas libero ante, porta et auctor non, dapibus eu dui. Fusce id vulputate augue. Sed vel massa odio. Nam massa purus, porttitor eu condimentum sed, cursus quis lacus. Suspendisse potenti. Nulla lorem ante, efficitur vitae finibus eget, mattis id lorem. Ut at eros maximus, fermentum dolor eget, faucibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam orci velit, aliquet at nisl a, commodo condimentum enim. Donec sodales nunc turpis, non cursus est tristique sed. Mauris congue, velit et pretium lacinia, nibh sapien convallis neque, et mollis dui magna id nunc. Nunc rutrum, erat at dignissim scelerisque, erat enim aliquam arcu, et volutpat justo mi nec purus. Mauris ornare pulvinar finibus.
Fusce at facilisis neque. Ut porttitor metus ac metus venenatis, sit amet aliquet massa ullamcorper. Etiam tincidunt leo pretium arcu molestie, ut porta nulla accumsan. Donec sem quam, ullamcorper a orci eget, commodo mattis libero. Proin nec arcu vestibulum, tempus massa non, ornare nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec turpis augue, euismod quis mattis a, efficitur in ex. Nulla ante turpis, congue a ultricies eget, pulvinar non sem. Suspendisse elementum lectus sit amet dignissim dictum. Curabitur luctus, ipsum in dapibus rhoncus, nisi massa rhoncus nulla, tempor semper orci dui vitae turpis. Etiam et laoreet nisl. Maecenas luctus, arcu et porttitor pretium, urna ligula efficitur elit, ut hendrerit tortor lectus at eros.
Donec feugiat nisi a consectetur semper. Suspendisse gravida erat leo, in sollicitudin est viverra a. Maecenas suscipit lectus at euismod egestas. Nam vel turpis aliquam, mattis dolor non, feugiat odio. Sed tincidunt nisi non condimentum laoreet. Cras venenatis arcu urna, ac mattis lacus ultricies faucibus. Suspendisse sollicitudin semper ex. In semper consequat velit et tristique. Duis ac tellus sit amet nisi fermentum venenatis.