CSS Grid

Moderní a jednoduchý systém pro tvorbu layoutu webových stránek. Stačí do projektu umístit jeden malý CSS soubor a můžete ihned začít tvořit. Díky oprefixovaným třídám v poslední verzi se Vám nestane, že by se CSS Grid ovlivňoval s jakýmkoliv již dříve vytvořeným kódem, samotné intuitivní názvy tříd Vám zase usnadní orientaci v kódu. Balíček je distribuován pod licencí MIT.

Instalace

Yarn far fa-copy Kopírovat

yarn add @arodax/css-grid

NPM far fa-copy Kopírovat

npm i @arodax/css-grid

CDN far fa-copy Kopírovat

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@arodax/css-grid@2/index.min.css">

Manuálně far fa-download Stáhnout

Soubor se stáhne a uloží do počítače.

Zlomy a prohlížeče

Zařízení	Kód	Šířka
Extra velké	xl	1551+ px
Velké	lg	1251 - 1550 px
Střední	md	951 - 1250 px
Malé	sm	751 - 950 px
Extra malé	xs	0 - 750 px

Edge 16+

Firefox 31+

Chrome 49+

Opera 36+

Safari 9+

Ukázky použití

Různá šířka

col-12

col-11

col-1

col-10

col-2

col-9

col-3

col-8

col-4

col-7

col-5

col-6

Stejná šířka

col-same-5

col-same-7

col-same-8

col-same-9

col-same-10

col-same-11

Automatická šířka

col

col-auto (krátký obsah)

col-auto (dlouhýýýýýýýýýýýýýý obsah)

Zarovnání vertikální

(obsah)
(obsah)
(obsah)
(obsah)
(obsah)

(rodič) v-start

(obsah)
(obsah)
(obsah)
(obsah)
(obsah)

(rodič) v-center

(obsah)
(obsah)
(obsah)
(obsah)
(obsah)

(rodič) v-end

(obsah)
(obsah)
(obsah)
(obsah)
(obsah)

(rodič) v-stretch

Zarovnání horizontální

(rodič) h-start

(rodič) h-center

(rodič) h-end

(rodič) h-evenly

(rodič) h-around

(rodič) h-between

Roztahování a smršťování

shrink-0

grow-1