A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Alternatives To Grd
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Flexboxgrid9,0021,3611943 years ago14August 12, 201665otherHTML
Grid based on CSS3 flexbox
Flex Layout5,9175,089934a month ago41June 30, 202250mitTypeScript
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Split5,6302481323 months ago43January 07, 2022158mitJavaScript
Unopinionated utilities for resizeable split views
Lost4,5281,743181a month ago48August 16, 202221mitJavaScript
LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
Awesome Css Learning2,923
9 days ago5other
A tiny list limited to the best CSS Learning Resources
Css Gridish2,212
4 years ago17otherCSS
Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.
Grd2,20973a month ago11March 16, 20189mitHTML
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Grid2,059134724 years ago10August 06, 2019mitJavaScript
This package has moved and renamed
Fukol Grids1,453
6 years agoOctober 25, 20167otherCSS
Reflexbox1,363225 years ago5July 20, 2016JavaScript
Moved to
Alternatives To Grd
Select To Compare

Alternative Project Comparisons

grd ""


A CSS grid framework using Flexbox.

  • Simple: Provides just 2 base classes Grid and Cell and some modifiers.
  • Light-weight: Only 321 bytes (Gzipped).
  • Flexible: Easy to use 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).

If you want to use Grd with Sass, you can choose grd-sass as Sass port.


npm install grd


<div class="Grid">
  <div class="Cell -3of12">3of12</div>
  <div class="Cell -9of12">9of12</div>

Grid modifiers

Vertical layout Description
-top Pull items to top
-middle Pull items to middle
-bottom Pull items to bottom
-stretch Stretch items
-baseline Pull items to baseline
Horizontal layout Description
-left Layout items to left
-center Layout items To center
-right Layout items to right
-between Add spaces between items
-around Add spaces around items

Cell modifiers

Cell width Description
-fill Set item width to left
-1of12 Set item width to 8.3%
-2of12 Set item width to 16.7%
-3of12 Set item width to 25%
-4of12 Set item width to 33%
-5of12 Set item width to 41.7%
-6of12 Set item width to 50%
-7of12 Set item width to 58.3%
-8of12 Set item width to 66.7%
-9of12 Set item width to 75%
-10of12 Set item width to 83.3%
-11of12 Set item width to 91.7%
-12of12 Set item width to 100%


MIT Shogo Sensui

Popular Flexbox Projects
Popular Grid Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Grid Layout