CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS Grid Container


1

2

3

4

5

6

7

8


Mřížkový kontejner

Aby se element HTML choval jako mřížkový kontejner, musíte nastavit displayvlastnost na gridnebo inline-grid.

Kontejnery mřížky se skládají z položek mřížky umístěných uvnitř sloupců a řádků.


Vlastnost grid-template-columns

Vlastnost grid-template-columnsdefinuje počet sloupců v rozložení mřížky a může definovat šířku každého sloupce.

Hodnota je seznam oddělený mezerami, kde každá hodnota definuje šířku příslušného sloupce.

Pokud chcete, aby rozvržení mřížky obsahovalo 4 sloupce, zadejte šířku těchto 4 sloupců nebo „automaticky“, pokud by všechny sloupce měly mít stejnou šířku.

Příklad

Vytvořte mřížku se 4 sloupci:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Poznámka: Pokud máte více než 4 položky v mřížce se 4 sloupci, mřížka automaticky přidá nový řádek, do kterého položky vložíte.

Vlastnost grid-template-columnslze také použít k určení velikosti (šířky) sloupců.

Příklad

Nastavte velikost pro 4 sloupce:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}


Vlastnost grid-template-rows

Vlastnost grid-template-rowsdefinuje výšku každého řádku.

1

2

3

4

5

6

7

8

Hodnota je seznam oddělený mezerami, kde každá hodnota definuje výšku příslušného řádku:

Příklad

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}


Vlastnost justify-content

Vlastnost justify-contentse používá k zarovnání celé mřížky uvnitř kontejneru.

1

2

3

4

5

6

Poznámka:justify-content Aby vlastnost měla nějaký účinek , musí být celková šířka mřížky menší než šířka kontejneru .

Příklad

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Příklad

.grid-container {
  display: grid;
  justify-content: space-around;
}

Příklad

.grid-container {
  display: grid;
  justify-content: space-between;
}

Příklad

.grid-container {
  display: grid;
  justify-content: center;
}

Příklad

.grid-container {
  display: grid;
  justify-content: start;
}

Příklad

.grid-container {
  display: grid;
  justify-content: end;
}


Vlastnost align-content

Vlastnost align-contentse používá k vertikálnímu zarovnání celé mřížky uvnitř kontejneru.

1

2

3

4

5

6

Poznámka:align-content Aby vlastnost měla nějaký účinek , musí být celková výška mřížky menší než výška kontejneru .

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Příklad

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}