Multi-Column Newspaper & Magazine Layout Plugin - jQuery pageColumns

The jQuery pageColumns plugin for creating a responsive, multi-column layout that divides your regular content into a specific number of columns using CSS columns property.

Ideal for creating Newspaper & Magazine layouts from your sectioned content.

See also:

• jQuery Plugin For newspaper Column Layout - Columnizer
• jQuery Plugin To Divide Webpage Into Several Sections - Splitter

How to use it:

1. The plugin requires modernizr.js to detect the CSS columns support for browsers.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

2. Include jQuery library and the jQuery pageColumns plugin at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="pagecolumns.js"></script>

3. Add your content to a DIV container with the class of 'npcolumns'.

<div class="npcolumns">
  Content Here
</div>

4. Initialize the plugin and specify the number of columns you want to use.

$(function(){
if (Modernizr.csscolumns)
  $('.npcolumns').pageColumns({
    defNumberOfColumns: 2 // default: 1
  });
});

5. Specify the required window width (do nothing in smaller windows).

$(function(){
if (Modernizr.csscolumns)
  $('.npcolumns').pageColumns({
    defNumberOfColumns: 2,
    minWindowWidth: 604
  });
});

6. Set the column height.

$(function(){
if (Modernizr.csscolumns)
  $('.npcolumns').pageColumns({
    defNumberOfColumns: 2,
    columnHeight: '82vh'
  });
});

7. Set the space between columns.

$(function(){
if (Modernizr.csscolumns)
  $('.npcolumns').pageColumns({
    defNumberOfColumns: 2,
    defColumnGap: 0.038
  });
});

8. Set the minimal window height.

$(function(){
if (Modernizr.csscolumns)
  $('.npcolumns').pageColumns({
    defNumberOfColumns: 2,
    minWindowHeight: 450
  });
});

Changelog:

2019-08-02

• JS update

---

This awesome jQuery plugin is developed by jmroelofs. For more Advanced Usages, please check the demo page or visit the official website.