Columns

Efficiently utilize the space for your webpage.


Getting started Download

Features

Columns 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.


You can have different column count and apply item span per breakpoint.

#ColSpan #AutoHeight #BreakPoint

This webpage is using Columns.

Getting Started

  1. You can download the JS file here.

  2. Import columns.js:

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

  3. Add Columns HTML Layout

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

  4. 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>

  5. Check Demos and API to find the features you may need.




































API

Full Columns HTML Layout

<div class="columns">
  <div>...</div>
  <div data-col-span="4">...</div>
  <div data-col-span="full">...</div>
  <div data-col-span="1, 2, 3">...</div>
</div>

data-col-span is for control the column span of the item.

data-col-span="4"

You can using "full" to keep the item in the full with span in all breakpoint.

data-col-span="full"

You can using "," to separate individual column span in different responsive breakpoint. Refer to the breakpoints parameter from narrow to wide screen. 

data-col-span="1, 2, 3"

Script

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

Parameters

Name Type Default Description
autoHeight boolean false if true , then the previous item of the column span item will auto adjust the height to fit in gap.
breakpoints object null

Allows to set different parameter for different responsive breakpoints (screen sizes). Only count and gap can be apply in breakpoints . 

breakpoints: {
    768: { /* >= 768px */
        count: 4,
        gap: [12, 16],
    },
    992: { /* >= 992px */
        count: 6,
        gap: 16
    }
  }
count interger 4 Number of the columns structure.
gap interger | array 12 Distance between column items in px. Using array to define horizontal and vertical gap, one interger for both.
imageLoad boolean true if true, then the Columns will auto refresh after image in the Columns loaded.
itemNode string "div" The tag of Columns should using as child (Directly child only allowed).
rtl boolean false Change the arrangement to right to left if true.

Methods

[[Columns]].render()

for refresh the layout.


[[Columns]].destroy()

for destroy the Columns.

Demos

Default

Column Span Item

Set a custom column span for each column item.

Auto Height

When handling column span items, automatically increase the height of the last item in the related column(s) to eliminate gaps.

Download

If you want to use Columns assets locally, you can directly download them by click here

To-Update List

  • Ordering attribute
  • Watching items' size
  • Columns-in-columns