columns-layout

Efficiently utilize the space for your webpage - This plugin can help you efficiently utilize the space in your webpage. It aligns your section form top to bottom as well as making cross column layout.

Visit https://johnsonhklhk.com/columns for detail.

Visit https://johnsonhklhk.com/columns for detail.

Getting Started

• API
• Demos

Quick Start

1. Import columns.min.js :

   <script src="columns.min.js"></script>
   

2. Add HTML Layout :

   <div class="columns">
       <div>...</div>
       <div>...</div>
       <div>...</div>
       ...
   </div>
   

3. Initialize Columns :

    <script>
        var myColumns = new Columns(".columns", {
            count: 2,
            gap: 12,
            autoHeight: true,
            breakpoints: {
                768: {
                    count: 4,
                    gap: [12, 16],
                },
                992: {
                    count: 6,
                    gap: 16,
                },
            },
        }).init();
    </script>
   

Visit https://johnsonhklhk.com/columns for detail.