CSS Newspaper Column Layout with jQuery Columnizer

The Columnizer is a well designed, cross browser and multi-functional column layout plugin for jQuery. It helps you to create CSS newspaper column layout dynamically. The plugin requires nothing tough, it automatically layout your content in newspaper column format. You can define either column width or a fixed number of columns for your web page layout.

Moreover, the plugin comes with multiple options and a number of built-in newspaper layouts. You can browse all newspaper layouts through demo page.

Plugin Overview

Plugin: Columnizer
Author: Adam Wulf
Licence: MIT Licence
Published: August 20, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 164 KB

How to Create Newspaper Column Layout

1. To getting started with newspaper column layout, first of all load jQuery and Columnizer JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Columnizer JS -->
<script src="src/jquery.columnizer.js"></script><script>

2. After that, create some paragraphs and other HTML elements (like images, headings etc) like the following.

<div id="wrapper">
	<div class="wide">
		<h1>A True Newspaper Layout</h1>
		<p>All of the content in this layout is auto-overflowing from the top columns into the bottom columns. View the source to check it out!</p>
		<p>Some sample text...</p>
		<p>Some other peragraph...</p>
         .........
         .........
         .........
   </div>
</div>

3. Finally, initialize the plugin in jQuery document ready function to columnizing your contents like newspaper layout.

$(document).ready(function(){

   $('.wide').columnize({
      width : 500,
      buildOnce : true,
   });

});

Advance Configuration Options for CSS Newspaper Column Layout

The following are some advance configuration options to create / customize “Newspaper Column Layout”.

Option Description, Default, Type
width

This option useful to define rough width for a column. The plugin will create columns as many as window width. Default: 400, Type: Number.

$('.wide').columnize({
   width: 400,
});
buildOnce

Decide weather to rebuild column layout on window resize. Best for responsive layout. Default: false, Type: Boolean.

$('.wide').columnize({
   buildOnce : false,
});
overflow

Enable / disable overflow. Default: false, Type: Boolean.

$('.wide').columnize({
   overflow : false,
});
columnFloat

Define the CSS floating property for columns. Default: ‘left’, Type: String.

Available Option: ‘left’ | ‘right’

$('.wide').columnize({
   columnFloat : "left",
});
manualBreaks

This option useful to enable / disable automatically layout columns. Default: false, Type: Boolean.
<4/p>

$('.wide').columnize({
   manualBreaks : false,
});