---
title: "Siatki CSS - krótkie zestawienie gridów"
description: "Przegląd frameworków CSS grid - od minimalistycznych rozwiązań po rozbudowane systemy jak Bootstrap i Foundation."
date: 2014-04-16
category: Web Development
tags: ["CSS", "grid", "frontend", "responsive"]
url: https://uper.pl/blog/siatki-css-grid-frameworks/
---

# Siatki CSS - krótkie zestawienie gridów

Systemy gridów CSS ułatwiają tworzenie responsywnych layoutów. Oto przegląd dostępnych rozwiązań - od lekkich po rozbudowane.

## Lekkie frameworki

### Simple Grid
Minimalistyczny grid bez zbędnych dodatków. Idealny gdy potrzebujesz tylko systemu kolumn.

### Toast CSS Framework
Lekki framework z czystym, semantycznym kodem HTML.

### Bourbon Neat
Grid oparty na SASS, oferujący semantyczne mixiny bez klas w HTML.

### csswizardry-grids
Elastyczny system gridów od Harry'ego Robertsa z BEM-ową notacją.

### Kube CSS Framework
Lekki framework z podstawowymi komponentami i typografią.

### One% CSS Grid
Prosty grid oparty na procentach z 12 kolumnami.

## Rozbudowane frameworki

### Bootstrap

Najpopularniejszy framework CSS, rozwijany przez twórców Twittera.

**Cechy:**
- Responsywna siatka 12-kolumnowa
- Bogaty zestaw komponentów UI
- Wtyczki JavaScript
- Wsparcie dla LESS/SASS
- Ogromna dokumentacja

### Foundation

Framework z podejściem "mobile first".

**Cechy:**
- Konfigurowalna siatka
- Zaawansowane funkcje mobilne
- Responsywne tabele i multimedia
- Wsparcie dla SASS
- Interchange - ładowanie różnych zasobów per breakpoint

### Skeleton

Minimalistyczny framework oparty na systemie 960 Grid.

**Cechy:**
- Stała szerokość 960px
- 16 kolumn
- Bardzo lekki (~400 linii)
- Dobry punkt startowy

## Jak wybrać?

| Potrzeba | Rekomendacja |
|----------|--------------|
| Tylko grid | Simple Grid, One% CSS Grid |
| SASS/semantic | Bourbon Neat, csswizardry-grids |
| Pełny framework | Bootstrap, Foundation |
| Minimum kodu | Skeleton |

## Semantyczny kod

Lżejsze frameworki często używają semantycznego podejścia:

```html
<!-- Zamiast klas Bootstrap -->
<div class="col-md-6">...</div>

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

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

## Podsumowanie

Wybór gridu zależy od skali projektu. Dla prostych stron wystarczy lekki framework, dla aplikacji webowych lepszy będzie Bootstrap lub Foundation.