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: January 19, 2024
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,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...