Simple multi-column list

In this example below you will see how to do a Simple multi-column list with some HTML / CSS and Javascript

This awesome code was written by toddprouty, you can see more from this user in the personal repository.
You can find the original code on
Copyright toddprouty ©
  • HTML
  • CSS
  • JavaScript
    <ul class="column-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5 - This is a much longer list item that wraps to more than one line</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
  <li>List item 11</li>
  <li>List item 12</li>
  <li>List item 13</li>
  <li>List item 14</li>
  <li>List item 15</li>
  <li>List item 16</li>
  <li>List item 17</li>
  <li>List item 18</li>
  <li>List item 19</li>
  <li>List item 20</li>
  <li>List item 21</li>
  <li>List item 22</li>

/*Downloaded from */
    .column-list {
  columns: 1;
  column-gap: 2em;
  @media screen and (min-width: 30em) {
    columns: 2;
  @media screen and (min-width: 40em) {
    columns: 3;
  @media screen and (min-width: 64em) {
    columns: 4;
  @media screen and (min-width: 75em) {
    columns: 5;
  @media screen and (min-width: 90em) {
    columns: 6;
    width: 85%;
    margin: 0 auto;

/*Downloaded from */