13 CSS UI Grid Systems and Libraries for 2018

13 CSS UI Grid Systems and Libraries for 2018

Useful CSS Grids for quickly building web and mobile apps.

Css is one of the things most developers either hate or love. Over the years many projects were created to work with it, and to work around it.

As a system, grids were first used to arrange handwriting on paper, and then were applied to a manuscript layout.

Today, nearly every frontEnd developer uses a CSS grid system at some point, to structure and manage proportions between the elements aligned on page. To help you get the job done, and on popular demand, we’ve gathered some (unranked) useful libraries which makes this job a whole lot easier- and faster.

Tip: When working with UI components to build apps faster, you can put them in a Bit collection to make them discoverable and reusable in new projects.

1. Flexbox grid

A grid system based on the flex display property, based on CSS3 flexbox. Although a bit old, this 7k stars grid system is still widely popular. Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Percent based widths allow fluid resizing of columns and rows, and nested grids are also supported.

2. Bulma

More of a Flexbox-based, mobile-first CSS-Framework than a Grid library, at 30K stars Bulma is a simple and very effective modern gris system. Bulma is basically a collection of CSS classes so you can write the HTML code you want. You only need 1 CSS file to start , so feel free to give it a try.

3. Bootstrap Grid

Bootstrap’s powerful mobile-first flexbox grid for building layouts of all shapes and sizes with a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. The world’s most popular CSS framework’s grid is always an excellent choice for those using it.

4. React Material-UI Grid | React Grid Layout

An excellent React implementation for the Material-Design grid system layout . The grid system is implemented with the Grid component which uses CSS’s Flexible Box module for flexibility, and two types of layout: containers and items . Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. Items have padding to create the spacing between individual items. At 40k stars, it’s defiantly a popular choice.

React Grid layout

React-Grid-Layout is a responsive grid layout system for React. It supports breakpoints, which can be provided by the user or autogenerated. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint. Try it out online in this demo !

• If seeking a Data Grid React component, you can also try Griddle .

5. Muuri

At 7K stars Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. It supports nested grids, and even provides a minified version for production usage. You can play with it online here .

6. Rebass Grid

From the creators of the popular Rebass library comes a responsive React grid system built with styled-system, with support for styled-components and emotion (previously grid-styled ). All @rebass/grid components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values . A pretty neat option to consider.

7. Basscss

This 5K stars and a bit old low-level CSS toolkit contains a useful model for working with a CSS grid. It’s basically a responsive float and width utilities to create a variety of grid layouts, which can be used in combination with layout, white space, and other utilities. You can use breakpoint-prefixed column utilities to change the grid at different screen widths. Take a look.

8. Toast

Although not actively maintained, this 2K stars library provides a A highly-customizable, responsive (S)CSS grid worth checking out. Set any number of columns, any gutter size, and the classes you need- and edit the _grid.scss file’s variables to your needs. As many columns you want, in any combination. What you see is what you get. Use with care, as always.

9. Pure

This 20K stars library provides set of small, responsive CSS modules that you can use in every web project, including a grid system. It comes with a solid base built on Normalize.css to fix cross-browser compatibility issues, consistently styled buttons that work with <a> and <button> elements and styles for vertical, horizontal and dropdown menus. Check it out.

10. Milligram

A 7.5K stars “minimalist” (2kb gzipped) CSS framework provides a minimal setup of styles for a fast and clean starting point. Milligram uses the CSS Flexible Box Layout Module standard, striving to achieve simplicity and maintainability. Simply add columns you want in a row, and they’ll evenly take up the available space. Here are some visual examples .

11. Neat

This relatively less well-known lightweight and flexible Sass grid already has 4.5K stars. The variable is a sass map that overrides Neat’s default grid settings. If you need multiple grids in a single project, you can do this by defining a new map stored within a variable of your choosing. Neat!

12. GRD

A very lightweight (321 bytes (Gzipped)) 2K stars CSS grid framework using Flexbox. It provides 2 base classes Grid and Cell with some modifiers, and supports easy usage of Flexbox features. Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11). To use Grd with Sass, you can choose grd-sass as Sass port. A slim and effective way to get stuff done.

13. Gridlex

At 1.2K stars, this is yet another responsive, robust and flexible CSSGrid System. Based on CSS Flexbox module, Gridlex is a simple CSS grid system to quickly create modern layouts and submodules. Each column is the same width as every other cell in the grid, and you can add sizing classes to individual columns. For responsive designs, you can add classes based on media-queries. Grids can be nested here too. A nice option to consider.

Honorable mentions

Note: Some are not being actively maintained, so use with care.