Resize the viewport to see the demo in action.
CSS
main {
column-count: 1;
background-color: yellow;
}
@media (min-width: 600px) {
main {
background-color: green;
column-count: 2;
column-gap: 5%;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
}
}
@media (min-width: 800px) {
main {
background-color: whitesmoke;
column-count: 3;
column-gap: 5%;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: black;
}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis varius purus. In semper scelerisque nibh. Phasellus quis dolor ullamcorper augue faucibus tincidunt. Fusce id maximus elit. Aliquam magna nisi, consequat non metus scelerisque, ultricies placerat justo. Integer semper, lacus eu sodales pellentesque, neque sem consectetur nibh, eget euismod ligula felis at ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum lacinia vel neque sit amet placerat. Fusce pharetra convallis diam non pharetra. Sed et sagittis enim.
Duis tincidunt tortor id lacinia molestie. Vivamus ac tellus vehicula, posuere magna sed, luctus nunc. Vestibulum viverra tellus ex, et placerat est convallis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fermentum posuere odio ac commodo. Praesent vitae placerat sem, efficitur consequat orci. Praesent pharetra leo eu egestas consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque lacinia turpis ut bibendum pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi in elementum sapien.
Etiam at consectetur nisl, quis viverra purus. Sed rutrum varius lorem, quis placerat enim commodo in. Nam sed leo vel felis mattis iaculis vel et sapien. Etiam volutpat dignissim arcu eget tempor. Etiam ut dolor enim. Quisque non pretium orci. Nam pulvinar arcu sem. Sed pretium mauris id odio interdum, non posuere sem rhoncus. Praesent efficitur, mauris id auctor laoreet, odio tellus lobortis dui, at semper dui tellus ut neque. Ut vulputate aliquam congue. Fusce porttitor vitae velit at mollis. Ut et urna non sem venenatis ultricies ut et nibh. Nullam dignissim, odio suscipit sollicitudin porta, turpis leo molestie tortor, ut pulvinar ante leo id sem. Donec eu quam tincidunt, blandit nulla at, suscipit eros. Nullam elit dui, tempor in aliquet sed, ornare vitae leo. Proin faucibus velit id consequat blandit.
Aenean pretium mollis blandit. Nullam cursus neque eget molestie mattis. Integer mollis lobortis ipsum non laoreet. Suspendisse sit amet mi et augue porttitor rutrum. Phasellus consectetur, leo sit amet fringilla egestas, orci sapien feugiat arcu, at efficitur odio massa vitae dui. Morbi varius tristique hendrerit. Nullam blandit tristique arcu, sagittis dictum turpis vestibulum sit amet. Duis sit amet justo eu metus rhoncus cursus. Praesent a tincidunt neque. Vivamus venenatis tincidunt finibus.
Morbi ante enim, laoreet sit amet varius gravida, blandit vel sem. Praesent placerat rutrum nisi nec eleifend. Nulla egestas sit amet odio eu iaculis. Quisque suscipit pharetra dignissim. Nunc eu finibus quam. Sed eu eros nulla. Morbi scelerisque ornare lacinia. Morbi in felis pulvinar, consequat tellus in, feugiat nibh. Aliquam luctus ultricies ante ac efficitur. Vivamus cursus, augue et consequat ullamcorper, ex sem facilisis lacus, id suscipit ligula turpis ac ligula. Quisque volutpat dolor ut massa porta, vel ultrices velit ornare. Praesent commodo, arcu ac tristique lobortis, est nulla porttitor mi, vel vulputate tellus felis in tellus. Vestibulum a eleifend mi.
Praesent condimentum, massa eget euismod mollis, lectus sapien pulvinar ex, vitae dictum metus ipsum eu tortor. Aliquam ut mauris sed libero pharetra blandit. Ut aliquam molestie mollis. Curabitur purus turpis, faucibus id mattis sit amet, fermentum sit amet nulla. Sed luctus turpis at enim mattis auctor. Fusce eget dapibus libero. Nulla vel bibendum est. In fermentum, arcu ut dignissim ultrices, arcu elit ornare leo, a cursus risus velit eget lacus. Mauris quis dictum leo. In hac habitasse platea dictumst.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis massa enim, tempus vitae iaculis quis, porttitor ut felis. Proin congue vulputate aliquam. In quis iaculis lorem. Vivamus aliquam efficitur blandit. Aenean eu justo est. Vestibulum imperdiet luctus nulla, ac malesuada turpis sollicitudin sit amet. Etiam dapibus libero id lacus porttitor, eu vestibulum nunc lobortis. Phasellus rhoncus felis sed nisl consectetur consequat. Donec luctus nisl ut semper varius. Nunc varius nisi lectus, sed sollicitudin nisi pellentesque eget. Suspendisse laoreet imperdiet libero. Integer tincidunt vel justo non finibus.
Nulla vehicula orci neque, ut tempus magna commodo quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed in nisi cursus, iaculis lacus eget, dictum orci. Integer quam ligula, accumsan in nunc vitae, cursus blandit mauris. Integer in ultricies nulla, a porta justo. Ut placerat, ligula in vehicula consectetur, sem nunc dignissim elit, at lobortis orci libero id lacus. Nunc pharetra congue nibh, ut vestibulum metus posuere vel. Proin consequat felis eu diam gravida, nec blandit arcu faucibus.
Vivamus convallis dictum erat non vestibulum. Duis at enim quam. Morbi congue diam quis scelerisque faucibus. Fusce quis ante erat. Curabitur nec ex a metus sodales iaculis nec quis nunc. Pellentesque eget auctor nulla. Praesent porta ultricies ante, sit amet auctor dui euismod et. Pellentesque ac libero semper libero viverra sollicitudin et non mauris. Aenean magna massa, dapibus eu ex et, pharetra porttitor tellus. Aliquam non arcu ut massa venenatis mollis sed nec diam.
Aenean fermentum vel arcu quis aliquam. Ut erat ante, lobortis nec gravida in, scelerisque sagittis ligula. Nam aliquet vehicula facilisis. Quisque efficitur tellus sit amet elementum bibendum. Nam nec nisl semper, porta leo quis, imperdiet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc malesuada justo orci, tincidunt finibus elit facilisis at. Morbi ac ligula ullamcorper, sagittis nisl eleifend, ullamcorper urna. Vestibulum sodales enim leo, quis laoreet dolor dictum ac. Fusce maximus felis a augue dapibus egestas. Cras maximus augue at ante tempor, ac aliquet nibh interdum. Nam ut elit quam. Proin aliquam purus orci, eu efficitur nisi bibendum ac. Maecenas mollis neque in efficitur pretium. Fusce nec metus enim.
