Newton's Programmatic Measurements
    Wondering what’s next for npm?Check out our public roadmap! »

    @fuzzco/smart-columns

    1.0.1 • Public • Published

    Make columns that flow like this:

    item one    item four
    item two    item five
    item three
    

    with CSS like this:

    .your-list {
        display: grid;
        grid-template-rows: repeat(var(--row-count)auto);
        grid-auto-flow: column;
    }

    Install

    NPM

    1. npm install smart-columns

    2. In your JS:

      import smartColumns from 'smart-columns'
      
      smartColumns()
      

    Script include

    1. In your HTML:
      <script src="//unpkg.com/@fuzzco/smart-columns"></script>
      <script type="text/javascript">
          smartColumns()
      </script>
      

    Options

    smartColumns({
        // number of columns. default 2
        columns: 2,
     
        // CSS selector. default 'ol, ul'
        selector: 'ol, ul'
    })

    smartColumns sets a var called --row-count on each element it finds with the given selector. Run smartColumns again whenever the content changes to recalculate.

    Todo

    • Update when content changes - some kind of watcher?

    Install

    npm i @fuzzco/smart-columns

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    6.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar