---
title: "CSS Grids - Quick Overview of Grid Frameworks"
description: "Overview of CSS grid frameworks - from minimalist solutions to comprehensive systems like Bootstrap and Foundation."
date: 2014-04-16
category: Web Development
tags: ["CSS", "grid", "frontend", "responsive"]
url: https://uper.pl/en/blog/css-grid-frameworks/
---

# CSS Grids - Quick Overview of Grid Frameworks

CSS grid systems make creating responsive layouts easier. Here's an overview of available solutions - from lightweight to comprehensive.

## Lightweight Frameworks

### Simple Grid
Minimalist grid without unnecessary extras. Ideal when you only need a column system.

### Toast CSS Framework
Lightweight framework with clean, semantic HTML code.

### Bourbon Neat
SASS-based grid offering semantic mixins without classes in HTML.

### csswizardry-grids
Flexible grid system by Harry Roberts with BEM notation.

### Kube CSS Framework
Lightweight framework with basic components and typography.

### One% CSS Grid
Simple percentage-based grid with 12 columns.

## Comprehensive Frameworks

### Bootstrap

The most popular CSS framework, developed by Twitter creators.

**Features:**
- Responsive 12-column grid
- Rich set of UI components
- JavaScript plugins
- LESS/SASS support
- Extensive documentation

### Foundation

Framework with "mobile first" approach.

**Features:**
- Configurable grid
- Advanced mobile features
- Responsive tables and media
- SASS support
- Interchange - loading different resources per breakpoint

### Skeleton

Minimalist framework based on the 960 Grid system.

**Features:**
- Fixed width 960px
- 16 columns
- Very lightweight (~400 lines)
- Good starting point

## How to Choose?

| Need | Recommendation |
|----------|--------------|
| Grid only | Simple Grid, One% CSS Grid |
| SASS/semantic | Bourbon Neat, csswizardry-grids |
| Full framework | Bootstrap, Foundation |
| Minimum code | Skeleton |

## Semantic Code

Lighter frameworks often use a semantic approach:

```html
<!-- Instead of Bootstrap classes -->
<div class="col-md-6">...</div>

<!-- Semantic SASS mixin -->
<article class="main-content">...</article>
```

```scss
.main-content {
  @include span-columns(6);
}
```

## Summary

Grid choice depends on project scale. For simple sites, a lightweight framework is sufficient; for web applications, Bootstrap or Foundation works better.