GridTab is a lightweight jQuery plugin to create grid based responsive tabs

samuel Grid & Layout 192 , ,


  • Responsive

  • Lightweight and based on CSS3 flexbox

  • Set Grid for each breakpoint

  • Switch between Grid and Tab layout

  • Next, previous and close controls

  • Scroll to current tab

  • Custom selectors

  • Right-To-Left Support

Package Managers

# Bower
bower install --save gridtab
npm install gridtab


Setting up GridTab is really simple

HTML Markup

Your markup should look something like this

<dl id="gridtab-1">
	<dt>Tab 1</dt>
	<dd>Tab 1 Description</dd>
	<dt>Tab 2</dt>
	<dd>Tab 2 Description</dd>
	<dt>Tab 3</dt>
	<dd>Tab 3 Description</dd>
	<dt>Tab 4</dt>
	<dd>Tab 4 Description</dd>
	<dt>Tab 5</dt>
	<dd>Tab 5 Description</dd>
	<dt>Tab 6</dt>
	<dd>Tab 6 Description</dd>

Where, <dt> contains the title of the tab nad <dd> contains the description to be shown on click.


Just add a link to the css file in your :

<link rel="stylesheet" type="text/css" href="gridtab.min.css"/>

jQuery Plugin

Then, before your closing <body> tag add:

<script type="text/javascript" src="gridtab.min.js"></script>

and initialize the plugin as shown below:

	$(document).ready(function() {

Where grid is the number of grids/tabs in a row


Basic Settings Type Default Description
grid integer 4 Number of grids or tabs per row
borderWidth integer 2 Width of the borders.
tabBorderColor string '#ddd' border color of the tabs (Hex Color Code).
tabPadding integer 25 padding/spacing around the tabs.
contentBorderColor string '#ddd' border color of the content section (Hex Color Code).
contentPadding integer 25 padding/spacing around content section.
contentBackground string '#fff' Background color for the content section (Hex Color Code).
activeTabBackground string '#fff' Background color for the active tab (Hex Color Code).
responsive Array null Array of objects having breakpoints and settings object which is enabled at a given breakpoint.
selectors Object see table below Object with options to set custom selectors.
config Object see table below Object with options to enable features like, setting initially active tab, next/prev controls, close button, transition speed etc.
callbacks Object open:false, close:false Callbacks for the open and close states of the content section.
selectors Type Default Description
tab string '> dt' By default, the click event is triggered on the entire tab ('dt'). This can be replaced with any custom selector within the dt. For example: '.readmore'.
closeButton string '.gridtab__close' Custom class for the close button, if 'showClose' is set to true.
nextArrow string '.gridtab__next.gridtab__arrow' Custom class for the next button, if 'showArrows' is set to true.
prevArrow string '.gridtab__prev.gridtab__arrow' Custom class for the prev button, if 'showArrows' is set to true.
disabledArrow string '.is-disabled' Custom class for the disabled state of next/prev buttons, if 'showArrows' is set to true.
config Type Default Description
layout string 'grid' Change the value to 'tab' for a tab layout. By default, the layout is 'grid' based.
keepOpen Boolean false If set to true keeps the active tab open (Disables toggle).
speed integer 500 Transition speed in milliseconds.
activeTab integer 0 Initially active tab. For example, 1 enables the first tab.
showClose Boolean false Shows the close button if set to true.
showArrows Boolean false Shows the next/prev buttons if set to true.
scrollToTab Boolean false Scrolls to the active tab on click
RTL Boolean false Converts tab to RTL

Responsive Example

The responsive settings is where you reset the grids and other properties at a given breakpoint.

	contentPadding: 40,
		breakpoint: 1024,
			contentPadding: 30
			contentPadding: 25
			contentPadding: 20

All properties under basic settings like: borderWidthtabPaddingtabBorderColorcontentBorderColor
contentPaddingcontentBackground and activeTabBackground, can be updated with the responsive settings.



Browser support

GridTab works on IE10+ in addition to other modern browsers like Chrome, Firefox and Safari


jQuery 1.8.3 +


Licensed under the MIT license.

Related Post

Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, Read more

CHARACTERISTICS ALS - Any List Scroller is the jQuery plugin by to scroll any list, of any dimension, with any content. Read more

FinderJS is a small UI component that allows you to browse tree-like data in columns, similar to the file manager Read more

Vertically scrolling sections of content with a slick mobile hamburger navigation.

jLayout JavaScript library provides layout algorithms for laying out components. A component is an abstraction; it can be implemented in Read more

A small jquery plugin will ensure that you don’t have ’empty boxes’ in gallery views. It works well on text Read more

ungrid is a tiny, responsive, table-based CSS grid system. The entire ungrid.css file is 97 bytes minified.

Stacky makes it easy to create UIs with panels that open horizontally using jQuery.Panels can be opened, closed, expanded and Read more