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:

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

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

.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.