Traditional design methods just a few years ago meant that you had to design a homepage all by itself, stitching together wireframes and content boxes and then hope for the best, but gradually this technique has disappeared and new, more modern, methods of rapid website development have emerged. Most notably, CSS3 introduced Flex-box — an easy to use grid function that you could use to create content layouts, but still — some are resistant, while others take even more complicated approaches for absolute design precision.
When you open a new website, typically what you are going to see is the header part of the site, content area and a sidebar — those main areas also include their own design layouts and specifications, and the rabbit hole continues to get deeper. It’s crucial to find a way to design a homepage (or any other page) layout that would look well across all mediums, devices, and software. So, we thought it might be useful to our fellow developers that we put together a collection of CSS & HTML frameworks and systems for developing grid layouts.
Want more frameworks? Try our other roundups:
Needless to say that these designs are adaptable to any situation, so you can save yourself from the headache of having to work out kinks and quirks of the design layout itself, and instead of that focus on fulfilling those grid boxes with the content that you want to put there. There is a great deal of variety and different styles that you’ll find throughout these grid systems, take some time to visit the demo pages and maybe even write down what you’re looking for so you have an easier time to find the matching framework for your needs.
Dead Simple Grid
Grids should never be complicated, in their true essence they’re just HTML elements putting together an overall design, and Vladimir Agafonkin is one of the developers who embraces that concept. His grid framework Dead Simple Grid comes in at only two hundred bytes of CSS code; that is such a minimal amount of code, your pages won’t even notice that it’s there.. You can separate the grid to feature a main content area, and a flexible sidebar if you desire. This kind of a grid would suit blogs and general homepage layouts where minimal design is preferred. Responsive design is integrated thanks to media queries, so the grid will look flawless on any device it’s being used on.
Bourbon is a very successful library of mixins for SASS preprocessor. This of course, has made Neat an appealing choice for those who use Bourbon and SASS already. Neat gives developers access to a fluid grid system that’s fast and easy enough to setup in minutes, but flexible to the point where unlimited changes and adjustments wouldn’t become a problem.
Grd is a CSS grid system that uses Flexbox as the backend tool for creating flexible and modern responsive layouts. Using the Live Demo you can play with the settings and different design customizations to see if Grd could solve your problem of getting a particular design element integrated in your existing workflow. We found it easy to make headers, footers, and general content areas using nothing but a dropdown of settings.
Structure, which is also based on Flexbox, uses declarative syntax patterns (similar to those in Angular.js) in order to define sections and layout parameters. Some developers have complained that the final markup of the page cannot be validated, but the idea is that using Structure you can create a declarative grid that doesn’t mess with traditional CSS attributes, like classes and identification names.
960 Grid System
Hundreds of thousands of websites have used Nathan Smith’s 960 Grid System to power their design layout. It’s an efficient tool for streamlining the workflow of hard working web developers. Through the choice of two different column layouts (12 & 16 respectively), developers can quickly bootstrap a homepage that’ll support any kind of dynamic and static input. It’s possible to add more columns, but you’ll need to work with the documentation to understand the use more clearly.
Unsemantic is the follow up version of the 960 grid that provides full responsive design capabilities. Through unique pull classes developers can rearrange the layout of the page they’re producing, which could help to promote and showcase most important content at any given time, a known strategy to help search engines better understand the purpose of each content element. Unsemantic is also a proud user of Media Queries, so established front-end devs won’t have a tough time to customize this grid framework for their own needs.
Hence the name, Simple Grid is for everyone who is after simplicity and ease of use. The layout is 100% responsive, compatible with smartphones, tablets and desktop computers. In other words, the performance of your project will be top-notch without a shadow of a doubt. It is entirely in tune with large screens and higher resolutions, too. Also, Simple Grid is just a grid, without any additional assets to it, which makes it very lightweight. With the convenient twelve-column structure, you have the freedom to create the layout that is exactly to your liking. You can divide it into two, three, four or six columns flawlessly.
With an HTML grid, like csswizardry-grids, you can save yourself time and energy. It is a robust tool that you can utilize to your heart’s content precisely. It is very user-friendly and easily structured, making sure web developers of all levels get the most out of it. On the screenshot above, you can take a peek at all the different variations that csswizardry-grids supports. You can freely reorder things, so it matches your desires to a tee. Do your activity by avoiding performing things from the ground up with csswizardry-grids now and start on the right foot.
The freedom that Profound Grid offers you goes over and beyond. You can employ this flexible and extensible grid system both for fixed and fluid layouts. The outcome will work on all modern devices butter smoothly out of the box. You can create the exact structure you want by changing, removing or adding columns according to your liking. You can check a few of the examples first to see what is possible with Profound Grid. Moreover, with the negative margins when calculating columns, Profound Grid guarantees that fluid layouts appear the same regardless of the screen size and web browser.
The benefits of using a grid system are tremendous, as not only do you save time, but you also do not need to worry about technicalities. For instance, Griddle ensures complete compatibility with popular devices and web browsers. Meaning, the performance of your application will be first-class at all times. With Griddle, you can bring to fruition anything from proportional and nested grids to centered and hybrid units. As for the latter, with some customization, you can combined fixed and fluid units in one impressive build. You have control over the horizontal centering of the units, and you can even alter the vertical alignment.
CSS Smart Grid
CSS Smart Grid follows the latest trends and regulations to ensure compatibility with different devices. In short, the tool is light, responsive and mobile-first for you to build epic stuff with it. Whether using a smartphone or a large desktop screen, CSS Smart Grid makes sure the layout operates on both without a hitch. For your information, even if someone uses a feature phone to browse the internet, your project based on CSS Smart Grid will work just as well – with a single column view. Over on the official website, you also have a quick how to, so you face no issues when using the tool.
Gridlex does stand out because of its stellar design and ease of use. The simplicity of this Flexbox based grid framework is astonishing, the vision is simple — wrap your columns within your grid, and if necessary to any additional adjustments to make your final design look irresistible. Just by looking at the demo’s of websites that use Gridlex it’s evident that this is a top of the line grid system and you won’t be disappointed by what it can do for your own projects and workflow.
Responsive Grid System
Responsive Grid System has a lot going for it, the perfect domain name, a clear vision and the required tools to make responsive grid design a breeze! The Grid Generator gives a simple form input where you can specify the number of columns you’d like to use, and the margin you’d like to see between them.. click submit and you’ve got yourself a ready to go code output of your next responsive grid layout. The author, Graham, is happy to do all the hard work for you if you so desire, you can get in touch with him at the footer of the page.
The developers built Gridly as a minimal grid layout system to support the most modern browsers today. It’s lightweight structure helps developers to have an easy time for getting a grid/column layout up and running without too much hassle. Overall, the absurdly minimal size of this library will leave you wanting for more for projects to come.
Formstone isn’t a single managed grid system by itself, it’s actually a library for front-end developers who are in need of highly customizable components and web elements that make up a traditional web page that you encounter on daily basis. Being a modular, responsive and automated library — Formstone can be used not only for the purpose of scaling a big-time website project, but also for the use of the grid layout itself.
Where would Bootstrap be today if it wasn’t for it’s grid system upon which everything else was built on? We’re still eagerly waiting for Bootstrap 4 to arrive, but in the meantime.. you can’t resist saying yes to a framework that has managed to establish itself as one of the most prominent front-end frameworks of this century. Millions of websites are powered by the features of Bootstrap, yet none of it would be possible if it wasn’t for the grid framework that comes integrated into the core of Bootstrap.
Foundation is another successful front-end library that supports responsive design, the latest version (Foundation 6) brings to the table even more modern features and elements that can help developers provide their clients with incredibly versatile designs. The easy to use templates provided by Foundation gives you a chance to take a rest from all this grid development, and instead focus on what’s important — the stuff that you’re going to put within that grid itself.
Skeleton has a beautiful and natural design that’s going to leave you for wanting more. The creators formed the idea behind Skeleton to be the best choice for small projects. Also, you can use it on projects where you don’t feel like using a full-fledged framework would be appropriate. Skeleton provides you with the essentials that you’d need to get a website prototype up and running; a grid layout, typography options for headings and sections, button elements for all your form needs, and in fact custom forms so you can save time for having to code your own, a nice addition of lists, tables and code syntax, and a media queries framework so your designs become fully responsive!
Responsive Grid System 2
Responsive Grid System (version 2) is a mobile-first grid system that’s super tiny in size, yet highly effective in style. You can select from a range of column layouts (24, 16, 12). You can also customize the margins and paddings between the columns, and use polyfills to create a stellar design layout.
Responsive Grid System for your Next Project
Responsive Grid System for your Next Project uses the same classes as 960 grid system. It built to serve mobile visitors first, and provides a boilerplate for header management. The developers tested it will all the modern browsers so you’re in good hands. You can use this as a base grid system that will help you to build responsive web design. This will maintain your existing proficiency over popular grid system.
HTML5 Boilerplate is a robust boilerplate framework (template) for front-end developers. It’s for developers who want to kickstart their project without the hassle involved with bigger frameworks like Bootstrap or Foundation.