<div style="display:flex; gap:24px;"><div style="flex:1;">
<!--- START COLUMN 1 --->
YOUR TEXT HERE
<!--- END COLUMN 1 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 2 --->
YOUR TEXT HERE
<!--- END COLUMN 2 --->
</div></div>
Results in:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis fermentum condimentum. Mauris eu lectus ac ante dictum feugiat in commodo tortor. Nunc posuere orci ac mi vehicula, sit amet efficitur elit venenatis. Duis commodo justo dictum elit consequat hendrerit. Nam mollis sagittis libero eget mattis. Mauris quis accumsan mi. Proin mattis pharetra aliquam. Quisque blandit urna ac maximus dictum. Aliquam eu laoreet mauris, in molestie nibh. Phasellus dictum justo at augue gravida pellentesque. Etiam condimentum nunc nec egestas sollicitudin. Maecenas justo neque, vehicula nec lobortis non, fringilla et magna. Nam id vestibulum massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus molestie nisl libero, non hendrerit turpis rutrum ac. Pellentesque ac eleifend sem.
Integer et mauris vitae libero luctus molestie. Duis rutrum accumsan finibus. Maecenas mi ipsum, dignissim sed egestas eget, aliquet sed augue. Nunc at diam quis ipsum facilisis hendrerit aliquam cursus augue. Phasellus sollicitudin velit tortor. Aenean ac tincidunt augue. Mauris sed viverra leo, sed lacinia purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper metus vel sem dictum porta. Proin sit amet velit quis odio ullamcorper condimentum ut vitae dolor.
This code block will allow you to add columns to any page, or even the infobox. The default block above will give you two columns, but you can add as many as you would like by adding additional "column dividers". An example with additional columns is provided below.
You can edit the spacing between these columns with the "gap" style rule in the initial display, and you can additionally customize them by styling the divs, as well. Want each column to have different colored background? You can do that by adding styling to the column divider, or the initial div for the leftmost column. Additionally, you can insert any text you'd like into the columns, including bullet lists, additional HTML/CSS formatting, etc. It will always be rendered into two columns.
Five column template:
<div style="display:flex; gap:24px;"><div style="flex:1;">
<!--- START COLUMN 1 --->
<!--- END COLUMN 1 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 2 --->
<!--- END COLUMN 2 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 3 --->
<!--- END COLUMN 3 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 4 --->
<!--- END COLUMN 4 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 5 --->
<!--- END COLUMN 5 --->
</div></div>
Results in:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis fermentum condimentum. Mauris eu lectus ac ante dictum feugiat in commodo tortor. Nunc posuere orci ac mi vehicula, sit amet efficitur elit venenatis. Duis commodo justo dictum elit consequat hendrerit. Nam mollis sagittis libero eget mattis. Mauris quis accumsan mi. Proin mattis pharetra aliquam. Quisque blandit urna ac maximus dictum. Aliquam eu laoreet mauris, in molestie nibh. Phasellus dictum justo at augue gravida pellentesque. Etiam condimentum nunc nec egestas sollicitudin. Maecenas justo neque, vehicula nec lobortis non, fringilla et magna. Nam id vestibulum massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus molestie nisl libero, non hendrerit turpis rutrum ac. Pellentesque ac eleifend sem.
Integer et mauris vitae libero luctus molestie. Duis rutrum accumsan finibus. Maecenas mi ipsum, dignissim sed egestas eget, aliquet sed augue. Nunc at diam quis ipsum facilisis hendrerit aliquam cursus augue. Phasellus sollicitudin velit tortor. Aenean ac tincidunt augue. Mauris sed viverra leo, sed lacinia purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam semper metus vel sem dictum porta. Proin sit amet velit quis odio ullamcorper condimentum ut vitae dolor.
Donec elementum cursus eleifend. Nunc mattis bibendum libero, ut volutpat arcu interdum vitae. Donec finibus, sapien eget porta congue, tellus nisi laoreet orci, at ultricies lectus ligula in nunc. Aliquam lobortis iaculis turpis, ut rutrum nibh elementum ut. Ut ac metus quis mi sagittis iaculis placerat sed purus. In hac habitasse platea dictumst. Aliquam rutrum lectus vitae urna lobortis consectetur. Etiam congue erat nulla, eu feugiat ipsum gravida eu.
Donec ligula augue, consectetur non lorem vitae, porttitor sollicitudin ipsum. Morbi quis volutpat nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut posuere odio, nec maximus augue. Curabitur nec massa consectetur urna viverra rhoncus. Nam sed tortor in mi vulputate ullamcorper. Mauris vel felis felis. Cras eget mollis diam. In semper hendrerit mi ut venenatis. Fusce sagittis, felis et hendrerit tincidunt, tortor augue pretium mi, vel vulputate turpis dolor vel massa. Sed nibh ligula, ultrices ac eleifend quis, mattis nec ligula. Proin sagittis rhoncus erat a sodales. Quisque cursus vehicula mi, ut mollis libero. Etiam massa felis, rhoncus at feugiat vulputate, gravida gravida orci. Nullam ac condimentum ex.
Donec facilisis imperdiet erat eget fermentum. Duis tristique porttitor massa vitae ultrices. Morbi aliquam interdum leo a finibus. Donec sed diam nec tellus sodales interdum. Morbi tristique dolor et tellus luctus, id accumsan orci ornare. Proin ultricies justo quis convallis mollis. Donec luctus velit sit amet orci condimentum congue.
As mentioned earlier, you can also use this code to generate columns within the infobox itself. This is not necessarily the recommended course of action as there is a built in column feature in the infobox already that is much easier to use, but if you want more advanced control, you can use this code block:
---
title: sandbox
layout:
- type: columns
keys: [ column section title ]
column section title: '
<div style="display:flex; gap:24px;"><div style="flex:1;">
<!--- START COLUMN 1 --->
YOUR TEXT HERE
<!--- END COLUMN 1 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 2 --->
YOUR TEXT HERE
<!--- END COLUMN 2 --->
</div></div>
'
---
Which results in:
