{"id":1741,"date":"2015-12-06T19:35:26","date_gmt":"2015-12-07T01:35:26","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1741"},"modified":"2015-12-06T19:35:26","modified_gmt":"2015-12-07T01:35:26","slug":"12-responsive-css-grid-systems","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/12-responsive-css-grid-systems\/","title":{"rendered":"12 Responsive CSS grid systems"},"content":{"rendered":"

A grid system provides designers with a structure to present their work in a much more manageable and readable way.
\nThe grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid systems that help to make sites more more responsive, beautiful and organized.<\/span><\/p>\n

1. Motherplate<\/a><\/span><\/h3>\n

This is a bare bone CSS3, HTML5 and SCSS responsive boilerplate that doesn\u2019t support any visual components or stylings.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

2. 1KB Grid<\/a><\/span><\/h3>\n

This is a simple grid system designed to use Sass and to remove classes from the HTML mark-up to make customization easier. It is inspired by the 1KB CSS Grid design. Now it has been extended to support fluid grids as well.<\/span><\/p>\n

3. Bourbon Neat<\/a><\/span><\/h3>\n

Built on top of Bourbon and Sass, this CSS grid system is a semantic grid framework. With its simple design, it has the ability to handle any type of responsive layout.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

4. Gridism<\/a><\/span><\/h3>\n

This is a simple and easy to use grid system. Grid units are stacked on screens smaller than 568px. On large screens the grids can have a width of 978px or 1140px.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

5. Responsive Grid System<\/a><\/span><\/h3>\n

This grid system is designed for fast and intuitive development of responsive sites. The Responsive grid system is made available in 12, 16 and 24 columns. It is a fluid CSS framework available with media queries for different devices, clearfix and optional reset.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

6. Skelton<\/a><\/span><\/h3>\n

This responsive CSS grid system is used to develop sites that look beautiful on screens of any size. It is a collection of CSS files and is built on three principles \u2013 fast to start, responsive grid down to mobile and style agnostic.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

7. Unsemantic<\/a><\/span><\/h3>\n

As a successor to the 960 grid system, this fluid grid system works in a similar way. The only difference is that instead of a set number of columns, it is based on percentages.<\/span><\/p>\n

8. Less Framework<\/a><\/span><\/h3>\n

Developers can design adaptive websites using this CSS grid system. Less Framework consists of 3 sets of typography presets and 4 layouts, completely based on one grid. Using this framework designers can build a website with multiple layouts and make it look more efficient.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

9. Herow<\/a><\/span><\/h3>\n

This Sass grid system saves time and provides designers with mixins that are easily customizable and simple to use. In order to deal with responsiveness problems, it also provides atomic mixins. Along with these, designers can also play with it in CSS by generating atomic classes.<\/span><\/p>\n

10. ChewingGrid<\/a><\/span><\/h3>\n

ChewingGrid allows designers to add a view that looks like a card listing template. This can be used to arrange videos, pictures or articles in a card view. Users can adjust the width of the card and also the number of columns that they wish to display. It can also be used to build custom semantic grids.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

11. One % CSS Grid<\/a><\/span><\/h3>\n

This grid system allows designers to create responsive web layouts quickly with ease. This is a percentage based 12 column grid system. It has only two start options, the one which fits 1024px and the other one that fits 1280px.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

12. Fluid Baseline Grid<\/a><\/span><\/h3>\n

Built with typographic standards, the Fluid Baseline Grid system combines the principles of baseline grids, fluid column layouts and responsive design into a device agnostic and resolution independent framework. It features beautiful typographic standards, common browser inconsistencies, CSS normalization, corrected bugs and better usability.<\/span><\/p>\n

\"css-grid-systems\"<\/p>\n

<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

A grid system provides designers with a structure to present their work in a much more manageable and readable way.
\nThe grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[79,49],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1741"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1741\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}