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

Thumbnail
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 Codepen.io
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>
</ul>

/*Downloaded from https://www.codeseek.co/toddprouty/simple-multi-column-list-qaXbmV */
    .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 https://www.codeseek.co/toddprouty/simple-multi-column-list-qaXbmV */
    

Comments