Build Responsive Tabbed Widgets with GridTab

By Jake Rocheleau. in Toolkit. Updated on July 17, 2022.

It’s always easier to build websites using open source tools rather than reinventing the wheel. These tools range from libraries to smaller plugins but you can find a solution for basically anything.

The phenomenal jQuery GridTab plugin is one fine example. It allows you to set up a custom grid, define the breakpoints, and create a responsive tabbed widget that suits any website.

Read Also: Theming jQuery UI Accordion

You can add your own CSS classes or work with existing ones to create a tab feature that fits your design. This plugin also supports navigation elements for next/prev controls and switching between tabs.

Installation is a breeze and it only requires the jQuery library as a dependency. Once that’s installed, you can grab GridTab from npm or download it directly from GitHub.

Keep in mind this tabbed widget plugin has a default style, so it does have a separate CSS stylesheet on top of the JS plugin file. But, you can always merge this CSS into your own to reduce HTTP requests.

To initialize the plugin, you simply pass the total grid size along with any optional parameter (all listed on GitHub).

Here’s a simple initialization script:

$(document).ready(function() {
	$('#gridtab-1').gridtab({
		grid:3
	});
});

Settings include custom selectors, responsive styles, border/padding/color settings, and of course, a callback function.

You might be curious to see how this all works and what it looks like in your browser. Check out the “Demos” section to see a few examples, including raw source code you can copy.

Most people think of tabs as features for small profile widgets. However, portfolio websites can also make use of grids with tabbed features and the GridTab plugin is the best resource for nailing this effect.

Everything you need to know, including full documentation, can be found on the main GridTab page. This also includes a link to the GitHub repo so you can browse through the source and start customizing your own responsive tabbed grids.