Simple Grid is a 12-column CSS grid made by Zach Cole. The Simple Grid site still offers a zip with the CSS and SCSS files under the MIT licence, and the code still renders in any browser because it is built on floats. The project itself is frozen, though. The npm package is at 1.0.2 from July 20, 2016, the repo shows 17 commits and no tagged releases, and 12 issues and 5 pull requests sit open. npm now marks 1.0.2 as deprecated, with the note "Package no longer supported".
Two details push people to replace it. The stylesheet imports Lato from Google Fonts and applies it to every element through a * selector, so adding it to an existing site changes your type. And the columns change at a single width, 45em. Below that, every .col-X goes full width unless you add the -sm suffix. If you are also weighing tiny all-in-one kits, our Pure CSS alternatives and Skeleton alternatives guides cover that group in more depth.
The list opens with the option that needs no library, then runs from small grid files up to full frameworks.
Prices below are as of November 6, 2026. Our method is on How we review tools.
Quick comparison
| Tool | Best for | Price | Platforms |
|---|---|---|---|
| CSS Grid and Flexbox | Zero-dependency layouts | Free, built into browsers | All current browsers |
| Pure.css Grids | Smallest drop-in grid file | Free (BSD) | Any browser, CDN or npm |
| Pico CSS | Classless pages with simple columns | Free (MIT) | Any browser, CDN or npm |
| Bootstrap grid | Familiar .row and .col classes | Free (MIT) | Any browser, CDN or npm |
| Bulma | Flexbox columns plus a CSS Grid module | Free (MIT) | Any browser, Sass or CDN |
| Foundation XY Grid | Vertical and block grids | Free (MIT) | Any browser, Sass or CDN |
| Tailwind CSS | Grid layout in utility classes | Free (MIT) | Build tool or browser script |
CSS Grid and Flexbox
Most of what Simple Grid does is now part of CSS itself. MDN marks Grid as Baseline widely available and says it has worked across browsers since October 2017, according to its grid property reference. One rule, grid-template-columns: repeat(12, 1fr), plus a gap gives you the same 12 tracks with no floats, no clearfix and no percentage margins to tune.
Flexbox handles the rest: card rows that wrap, nav bars and vertical centering. Media queries or container queries decide when columns collapse, so adding the tablet step Simple Grid never had is one more rule. Nothing to download, nothing to update, and your fonts stay yours.
Best for: New builds and redesigns where you own the stylesheet and want zero dependencies.
Pricing:
- Free, part of every current browser
- No download or licence
Watch out for:
- You name and document your own layout classes, so on a team the CSS can drift without a short written convention.
- Grid covers layout only. Buttons, forms and type styles still need your own CSS or another library.
Official site: CSS Grid and Flexbox.
Pure.css Grids
Pure is the closest like-for-like swap. Yahoo's library comes in modules, and the grids module weighs 0.5KB minified and gzipped. Column widths are fractions in the class name, such as pure-u-1-2, and responsive classes add a size prefix, as in pure-u-md-1-3.
Pure 3.1.0 arrived on September 28, 2026, the first release since October 2022, under a BSD licence. Its responsive grid has five breakpoints at 568px, 768px, 1024px, 1280px and 1920px, which fixes the single-switch problem on its own.
Best for: Existing float-grid pages that need a tiny, maintained file with more breakpoints.
Pricing:
- Free, BSD-3-Clause licence
- No paid tier
Watch out for:
- The responsive classes ship in a second file. The Pure grids docs say grids-responsive-min.css is not part of pure.css, so loading only the main file leaves the md and lg classes doing nothing.
Official site: Pure.css Grids.
Pico CSS
Pico fits readers who picked Simple Grid for its clean type and spacing as much as for its columns. It styles bare HTML, so headings, forms and tables look finished without classes, and it ships light and dark themes in 20 colour variants.
Layout help is minimal by design. In pico.min.css, the .grid class stacks children in one column on phones and places them in equal columns from 768px up. The current release, listed on Pico's npm page, is 2.1.1 from March 15, 2025, MIT-licensed.
Best for: Docs, landing pages and small apps written in plain semantic HTML.
Pricing:
- Free, MIT licence
- No paid edition
Watch out for:
- There are no column spans. Equal widths are all .grid offers, so a two-thirds and one-third split needs a CSS Grid rule of your own.
- Pico has no JavaScript, so modals and dropdown toggles are left to you.
Official site: Pico CSS.
Bootstrap grid
Bootstrap ships its grid as a file of its own. The 5.3.8 package includes dist/css/bootstrap-grid.min.css with containers, rows, columns, gutter classes, flex helpers and spacing utilities, and no components or JavaScript. That file is about 52KB minified, or roughly 6KB gzipped.
The markup will feel familiar after Simple Grid: a .row, then .col-md-6 or .col-lg-4. The gain is six tiers, with breakpoints at 576px, 768px, 992px, 1200px and 1400px, and gutters set by a 1.5rem variable. Version 5.3.8 from August 26, 2025 is still the stable line, while 6.0.0-alpha.1 landed on October 8, 2026.
Best for: Teams who want Simple Grid's .row and .col habits with proper responsive tiers.
Pricing:
- Free, MIT licence
- Grid-only CSS file included in the standard download
Watch out for:
- The default grid is still Flexbox. A CSS Grid mode exists behind the $enable-cssgrid Sass flag, which is false out of the box, so using it means compiling Bootstrap's Sass yourself.
- Bootstrap 6 moves responsive utilities to a prefix syntax such as .md:d-none, per the Bootstrap 6 alpha post, so class names will need updating later.
Official site: Bootstrap grid. Our listing: Bootstrap grid.
Bulma
Bulma packs two layout systems. The older one is Flexbox columns: a .columns wrapper with .column children sized by names like is-half or is-one-third, plus is-multiline for wrapping and is-mobile to keep columns side by side on phones.
The newer one, under sass/grid in version 1.0.4, uses real CSS Grid. Its fixed grid is built on container queries, so a grid reacts to the width of its parent rather than the window, and its smart grid sets a minimum column width and fits as many columns as the space allows. Bulma 1.0.4 dates from April 19, 2025 and is MIT-licensed, with source on Bulma's GitHub.
Best for: Projects that want readable class names and may add Bulma's buttons and forms later.
Pricing:
- Free, MIT licence
- Funded by Patreon and GitHub sponsors
Watch out for:
- The full bulma.min.css in 1.0.4 is about 678KB minified (around 65KB gzipped). For a grid-only setup you need Dart Sass and the grid modules, not the CDN file.
- The repo carries about 350 open issues and 180 open pull requests, and no release has shipped since April 2025.
Official site: Bulma.
Foundation XY Grid
Foundation for Sites rebuilt its grid in version 6.4, and the XY Grid docs now label the old float and flex grids as legacy. A .grid-x container holds .cell children sized with small-, medium- and large- prefixes, and .grid-y builds vertical layouts, something small grids rarely try.
Gutters are opt-in through .grid-margin-x or .grid-padding-x, and block grid classes like .medium-up-3 spread equal cells without a class on each child. In 6.9.0, foundation.min.css includes the XY Grid by default and comes to about 131KB minified, or 17.6KB gzipped.
Best for: App-style screens with fixed headers, scrolling panels and equal-cell galleries.
Pricing:
- Free, MIT licence
- No paid edition
Watch out for:
- Releases have slowed. Version 6.9.0 dates from September 27, 2024, and no release has followed.
- The full CSS file also brings Foundation's components, so trimming it to the grid means a Sass build.
Official site: Foundation XY Grid. Our listing: Foundation XY Grid.
Tailwind CSS
Tailwind drops the idea of grid classes and maps utilities almost one to one onto CSS Grid: grid grid-cols-12 on the parent, col-span-8 on a child, md:col-span-4 to change it at a breakpoint. The default breakpoints are 40rem, 48rem, 64rem, 80rem and 96rem, or 640px to 1536px.
Version 4.3.5 was published in early November 2026, under MIT. The usual setup is a build step that scans your templates, and a script-tag build is also published as @tailwindcss/browser 4.3.5. Layout, spacing and colour all live in the same class list, which some teams love and others find noisy.
Best for: Teams already using a build tool who want layout and styling in one system.
Pricing:
- Free, MIT licence
- Tailwind Plus templates and components are a separate paid product
Watch out for:
- Version 4 targets Chrome 111, Safari 16.4 and Firefox 128 or newer, per the compatibility page, so older browsers lose styles.
- Tailwind Labs laid off three of its four engineers in January 2026 after revenue fell almost 80 percent.
Official site: Tailwind CSS. Our listing: Tailwind CSS.
How to choose
| If you need | Pick |
|---|---|
| No dependency at all, just modern CSS | CSS Grid and Flexbox |
| The smallest grid file you can drop in | Pure.css Grids |
| Styled HTML with equal columns and no classes | Pico CSS |
| The .row and .col pattern with six breakpoints | Bootstrap grid |
| Grids that respond to their container, not the window | Bulma |
| Vertical layouts and block grids | Foundation XY Grid |
| Layout written straight into utility classes | Tailwind CSS |
When to stay with Simple Grid
Keep Simple Grid on a finished page that looks right today. Floats will not stop working, and there is no JavaScript to patch. If you keep it, delete the Google Fonts import at the top of simple-grid.scss when you already load your own fonts, because it requests Lato on every page view. The SCSS source is in the simplegrid package if you want to edit the breakpoint variables.
Frequently asked questions
Is Simple Grid still maintained?
No. The simplegrid package on npm has been at 1.0.2 since July 20, 2016, and the GitHub repository has 17 commits with no releases or tags. The site and zip download still work, and the code is MIT-licensed, so you can keep using or forking it.
How do I replace Simple Grid classes with CSS Grid?
Give .row the rules display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem. Then make .col-6 grid-column: span 6, and so on for the other widths. Wrap the spans in @media (min-width: 45em) to match Simple Grid's breakpoint, and drop the old float and clearfix rules. Below 45em, give each column grid-column: 1 / -1 so it fills the row.
What is the most lightweight CSS grid framework?
Of the maintained options here, Pure Grids is the smallest at 0.5KB minified and gzipped, plus its separate responsive file. Bootstrap's grid-only file is around 6KB gzipped. Native CSS Grid weighs nothing, since the browser already has it.
Do I still need a CSS grid framework?
For layout alone, usually not. Grid and Flexbox cover columns, gaps, alignment and reordering, and container queries let a block respond to its own width. A framework still helps when a team wants shared class names, or when you also need ready-made buttons and forms.
