Columns

Columns use CSS columns to automatically create responsive columns of content. Columns are responsive by default and the number of columns used will vary based upon the screen width.

These are separate to flexbox and grid.

They are ideal for multi column designs like newspapers. I like to use them for creating large lists of links such as dictionaries or glossaries.

Columns

Specify the number of columns to use.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Code Example
<div class="cols2 m-y5">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

<div class="cols3 m-y5">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

<div class="cols4 m-y5 f6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

Column Gap

The size between the columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Code Example
<div class="cols3 m-y5 col-gap2 f6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

<div class="cols3 m-y5 col-gap5 f6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

Column Width

Set the max width of the columns. These two examples both have 4 columns, but show different amounts because of the column width. Given more space the columns will increase to match the specification.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.

Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.

Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.

Code Example
<div class="cols4 m-y5 col-w4 f6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>

<div class="cols4 m-y5 col-w5 f6">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet magna id neque blandit, congue accumsan velit mattis. Morbi volutpat magna sed egestas interdum.</p>
	<p>Phasellus in gravida felis. Duis ut ipsum id mi tristique bibendum quis a erat. Suspendisse aliquam bibendum est, elementum ornare mi convallis eu. Nam fringilla mi sollicitudin congue dignissim. Maecenas consequat ac erat a pretium. Ut vitae leo pulvinar, tempor elit pretium, feugiat nisi.</p>
	<p>Vivamus eu diam purus. Integer commodo placerat nisl eu rhoncus. Praesent vulputate lacinia quam, et rutrum magna molestie eget. Fusce ultrices sollicitudin velit eu cursus. Maecenas varius lobortis maximus. Nullam et metus finibus, auctor augue sit amet, ornare quam.</p>
</div>