CSS Layouty

CSS Grid Layouty

V tomto článku se dozvíte vše o CSS Gridu. Najdete tu vysvětlení všech vlastností, které se gridu týkají (kromě zkratky grid, kterou jsem moc nepochopil).

Co je to CSS Grid

CSS Grid je layout systém, který nám umožňuje vytvářet jednoduchou cestou i více složité layouty. Narozdíl od flexboxu, který je také skvělým nástrojem pro tvorbu layoutu, je dvoudimenzionální a pracuje se s ním při tvorbě layoutu lépe. Lepší nástroj pro tvorbu layoutu jsme do příchodu CSS Gridu neměli.

K vytvoření gridu si nejprve musíme určit nějaký element, který použijeme jako container nastavením jeho display vlastnosti na grid. Poté si u něj pomocí vlastností grid-template-columns a grid-template-rows určíme rozměry sloupců a řádků, a můžeme do něj začít vkládat ostatní elementy a tvořit tak nějaký layout.

Vytvoření grid containeru

Grid container vytvoříme tak, že elementu, který chceme aby byl container nastavíme display vlastnost na grid, popřípadě inline-grid. Rozdíl mezi hodnotou grid a inline-grid je ten, že při nastavení hodnoty na inline-grid bude container inline element a při nastavení hodnoty na grid bude container block element. Je třeba dodat že při použití inline-grid bude jen container inline element, jeho položky ne.

<!DOCTYPE html>
<html lang="cs">
<head>
    <title>Vytvoření grid containeru</title>
    <style>
        .grid-container {
            displaygrid;
            background-colorlightgreen;
        }
        .inline-grid-container {
            displayinline-grid;
            background-colorlightgreen;
        }
    </style>
</head>
<body>
    Toto je <div class="grid-container">grid</div> container.
    <hr>
    Toto je <div class="inline-grid-container>inline-grid</div> container.
</body>
</html>
Toto je
grid
container.

Toto je
inline-grid
container.

Vlastnosti containeru a jeho položek

Některé vlastnosti týkající se gridu se nastavují na container a některé na jeho položky. Vlastnosti které se nastavují na container jsou: grid-template-columns, grid-template-rows, grid-template-areas, grid-template, column-gap, row-gap, gap, justify-items, align-items, place-items, justify-content, align-content, place-content, grid-auto-columns, grid-auto-rows, grid-auto-flow a grid. Vlastnosti, které se nastavují na položky containeru jsou: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-self, align-self a place-self. Jak vidíte, je jich hodně. Ve zbytku článku si můžete přečíst o každé z nich.

grid-template-columns a grid-template-rows

Tyto dvě vlastnosti definují sloupce a řádky containeru. Jako hodnotu jim nastavujeme mezerami oddělený seznam velikostí sloupců/řádků containeru. Pokud například chceme grid s prvním sloupcem o velikosti 30 pixelů, druhým o velikosti 50 pixelů a třetím o velikosti 70 pixelů, tak nastavíme vlastnost grid-template-columns na hodnotu: 30px 50px 70px. S řádky je to stejné.

U gridu můžeme také používat jednotku fr (fraction). Pomocí této jednotky můžeme nějakým sloupcům/řádkům přiřadit zbytek místa v containeru. Pokud tuto jednotku nastavíme více sloupcům/řádkům, tak sloupec/řádek s vyšší hodnotou obsadí více místa.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columns30px 50px 1fr/* definování sloupců gridu */
    grid-template-rows40px 30px 60px/* definování řádků gridu */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-template-columns | grid-template-rows</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- elementy se automaticky umístí do jednotlivých buněk gridu -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

Při definování sloupců a řádků gridu si také můžeme pojmenovat čáry mezi buňkami a na stranách containeru pokud chceme. Tato jména čar potom můžeme použít při nastavování jiných vlastností namísto výběru čáry pomocí pořadí. Jméno čáry zapíšeme mezi hranaté závorky umístěných před nebo za sloupcem/řádkem. Pokud chceme více jmen pro jednu čáru, tak je v hranatých závorkách oddělíme mezerou.

.container {
    displaygrid;
    grid-template-columns[prvni] 30px [druha] 50px [treti] 70px [posledni ctvrta]/* definování sloupců s pojmenováním čar */
    grid-template-rows[horni-cara prvni-cara] 40px [druha-cara] 30px [treti-cara] 60px [posledni-cara]/* definování řádků s pojmenováním čar */
}

Při definování sloupců nebo řádků gridu můžeme klidně více čarám nastavit stejné jméno. Jen potom při jeho použití v jiných vlastnostech musíme určit, jakou čáru chceme, připsáním pořadí výskytu jména.

.item {
    grid-column-startcol-start 2;
}

Pokud při definování sloupců nebo řádků nastavujeme vícekrát za sebou stejné části, tak na místo jejich ručního zapisování můžeme použít funkci repeat. Tato funkce jako parametr přijímá kolikrát chceme předanou část opakovat a část, kterou chceme opakovat.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columnsrepeat(320px [col-start])/* stejné jako: 20px [col-start] 20px [col-start] 20px [col-start] */
    grid-template-rowsrepeat(430px)/* stejné jako: 30px 30px 30px 30px */
}

Kromě funkce repeat máme ještě další funkce. Například funkci minmax pomocí které můžeme definovat minimální a maximální možnou velikost sloupce/řádku. Pokud bychom chtěli definovat jen minimální velikost, tak můžeme použít funkci min a pokud jen maximální tak funkci max.

.container {
    displaygrid;
    grid-template-columns20px 30px 40px;
    grid-template-rows20px minmax(20px40px)/* druhý řádek bude mít minimální velikost 20 a maximální velikost 40 pixelů */
}

Při nastavování velikostí sloupců nebo řádků můžeme namísto hodnot v jednotkách nebo procentech použít také speciální klíčová slova: min-content, max-content, auto a fit-content.

Klíčová slova pro nastavování velikostí sloupců nebo řádků:

  • min-content: sloupec/řádek bude mít minimální velikost podle obsahu. Představme si například tuto větu: "The very long hotdog.". Velikost při použití min-content bude pravděpodobně velikost slova "hotdog.".
  • max-content: sloupec/řádek bude mít maximální velikost podle obsahu. Představme si například tuto větu: "The very long hotdog.". Velikost při použití max-content bude pravděpodobně velikost celé věty.
  • auto: toto klíčové slovo je podobné jako jednotka fr, až na to že proti ní prohraje, když se bude rozdělovat zbylý prostor
  • fit-content: toto klíčové slovo použije prostor, který je k dispozici. Ten ale nikdy nebude menší než min-content a větší než max-content.

grid-template-areas

Pomocí této vlastnosti si můžeme určit a pojmenovat části gridu. Jména těchto částí potom můžeme použít u položek, pokud budeme nastavovat vlastnost grid-area (tato vlastnost určuje, kde se element v gridu zobrazí). Jako hodnotu této vlastnosti nastavujeme seznam řetězců, kde každý řetězec představuje jeden řádek. V řetězcích oddělujeme jména buněk mezerou. Pokud některé buňce nechceme nastavit jméno, tak napíšeme tečku. Nejlépe tuto vlastnost pochopíte v následující ukázce než v textu.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columnsrepeat(460px);
    grid-template-rowsrepeat(360px);
    grid-template-areas"header header header header" /* určení a pojmenování částí gridu */
                                         "main main . sidebar"
                                         "footer footer footer footer";
}

.header {
    background-colororangered;
    font-size16px;
    grid-areaheader/* element zabere část gridu, která se jmenuje header */
}
.main {
    background-colorblueviolet;
    font-size16px;
    grid-areamain/* element zabere část gridu, která se jmenuje main */
}
.sidebar {
    background-colororange;
    font-size16px;
    grid-areasidebar/* element zabere část gridu, která se jmenuje sidebar */
}
.footer {
    background-colorpink;
    font-size16px;
    grid-areafooter/* element zabere část gridu, která se jmenuje footer */
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-template-areas</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">main</div>
        <div class="sidebar">sidebar</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>
header
main
sidebar

grid-template

Tato vlastnost je zkratka pro vlastnosti grid-template-rows, grid-template-columns a grid-template-areas. Vlastnosti nejdříve předáme velikosti řádků, potom napíšeme "/" a napíšeme velikosti sloupců. Pokud chceme pomocí této vlastnosti také určit a pojmenovat části gridu (vytvořit grid-template-areas), tak před každou velikost řádku gridu přidáme řetězec se jmény buněk v řádku. Možná se vám na začátku bude tato zkratka zdát trochu zmatená, ale když se podíváte na následující ukázku, tak možná uznáte že když si její hodnoty vhodně naformátujete, vypadá to celkem logicky. Nalevo máme pojmenované části gridu, vedle nich pod sebou řádky (řádky jsou v gridu pod sebou - ve zkratce taky) a vpravo za znakem "/" máme sloupce, které jsou vedle sebe (sloupce jsou v gridu vedle sebe - ve zkratce taky).

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template/* zkratka pro grid-template-rows, grid-template-columns a grid-template-areas */
                            "header header header header" 60px
                                             "main main . sidebar" 60px
                                  "footer footer footer footer" 60px 60px 60px 60px 60px;
}

.header {
    background-colororangered;
    font-size16px;
    grid-areaheader;
}
.main {
    background-colorblueviolet;
    font-size16px;
    grid-areamain;
}
.sidebar {
    background-colororange;
    font-size16px;
    grid-areasidebar;
}
.footer {
    background-colorpink;
    font-size16px;
    grid-areafooter;
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-template</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">main</div>
        <div class="sidebar">sidebar</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>
header
main
sidebar

column-gap a row-gap

Pomocí těchto vlastností můžeme nastavit mezeru mezi sloupci a řádky gridu.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columns30px 60px 50px;
    grid-template-rows30px 50px 30px;
    column-gap5px/* mezera mezi sloupci */
    row-gap10px/* mezera mezi řádky */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>column-gap | row-gap</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

gap

Tato vlastnost je zkratkou pro vlastnosti row-gap a column-gap. Můžeme je tedy nastavit zároveň. Jako první hodnotu napíšeme mezeru mezi řádky, potom mezeru a mezeru mezi sloupci. Pokud ale chceme mít mezeru mezi řádky a sloupci stejnou, tak napíšeme jen jednu hodnotu a ta se použije pro řádky i sloupce.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columns30px 60px 50px;
    grid-template-rows30px 50px 30px;
    gap10px 5px/* mezera mezi řádky: 10px | mezera mezi sloupci: 5px */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>gap</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

justify-items

Pomocí této vlastnosti můžeme zarovnat položky v buňkách gridu horizontálně.

Hodnoty, které můžeme nastavit:

  • start: položky se zarovnají k počáteční hraně buňky
  • end: položky se zarovnají ke konečné hraně buňky
  • center: položky se zarovnají do středu buňky
  • stretch: položky se roztáhnou přes celou šířku buňky
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(31fr);
    grid-template-rowsrepeat(380px);
    justify-itemscenter/* zarovnání položek v buňkách gridu na střed (horizontálně) */
}

.container div {
    background-colororangered;
    width60px;
    height60px;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>justify-items</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

align-items

Pomocí této vlastnosti můžeme zarovnat položky v buňkách gridu vertikálně.

Hodnoty, které můžeme nastavit:

  • start: položky se zarovnají k počáteční hraně buňky
  • end: položky se zarovnají ke konečné hraně buňky
  • center: položky se zarovnají do středu buňky
  • stretch: položky se roztáhnou přes celou výšku buňky
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(31fr);
    grid-template-rowsrepeat(380px);
    align-itemscenter/* zarovnání položek v buňkách gridu na střed (vertikálně) */
}

.container div {
    background-colororangered;
    width60px;
    height60px;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>align-items</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

place-items

Pomocí této vlastnosti můžeme nastavit vlastnosti justify-items a align-items zároveň. Nejprve napíšeme hodnotu vlastnosti align-items a poté hodnotu vlastnosti justify-items. Pokud chceme u obou vlastností stejnou hodnotu, tak ji stačí napsat jen jednou a aplikuje se na obě vlastnosti.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(31fr);
    grid-template-rowsrepeat(380px);
    place-itemscenter end/* nastavení vlastností align-items a justify-items zároveň */
}

.container div {
    background-colororangered;
    width60px;
    height60px;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>place-items</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

justify-content

Občas může být náš grid menší než container. V takovém případě můžeme grid zarovnat. K zarovnání gridu horizontálně slouží vlastnost justify-content. Pokud ji nastavíme třeba na hodnotu center, tak se nám grid zarovná na střed.

Hodnoty, které můžeme nastavit:

  • start: grid se zarovná k počáteční hraně containeru
  • end: grid se zarovná ke konečné hraně containeru
  • center: grid se zarovná na střed containeru
  • stretch: položky v gridu se roztáhnou přes celou šířku containeru
  • space-around: položky v gridu se rovnoměrně rozprostřou po celé šířce containeru, tak aby měly všechny položky nalevo a napravo stejnou mezeru (před první a za poslední položkou tedy bude menší mezera než jinde)
  • space-between: položky se rovnoměrně rozprostřou po celé šířce containeru (před první a za poslední položkou nebude žádná mezera, jen mezi položkami)
  • space-evenly: položky se rovnoměrně rozprostřou po celé šířce containeru, tak aby mezery mezi položkami a na krajích containeru byly stejné
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(350px);
    grid-template-rowsrepeat(350px);
    justify-contentcenter/* zarovnání gridu na střed containeru */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>justify-content</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

align-content

Občas může být náš grid menší než container. V takovém případě můžeme grid zarovnat. K zarovnání gridu vertikálně slouží vlastnost align-content. Pokud ji nastavíme třeba na hodnotu center, tak se nám grid zarovná na střed.

Hodnoty, které můžeme nastavit:

  • start: grid se zarovná k počáteční hraně containeru
  • end: grid se zarovná ke konečné hraně containeru
  • center: grid se zarovná na střed containeru
  • stretch: položky v gridu se roztáhnou přes celou výšku containeru
  • space-around: položky v gridu se rovnoměrně rozprostřou po celé výšce containeru, tak aby měly všechny položky nahoře a dole stejnou mezeru (nad první a pod poslední položkou tedy bude menší mezera než jinde)
  • space-between: položky se rovnoměrně rozprostřou po celé výšce containeru (nad první a pod poslední položkou nebude žádná mezera, jen mezi položkami)
  • space-evenly: položky se rovnoměrně rozprostřou po celé výšce containeru, tak aby mezery mezi položkami a na krajích containeru byly stejné
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(350px);
    grid-template-rowsrepeat(350px);
    height250px;
    align-contentspace-between/* zarovnání gridu v containeru */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>align-content</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

place-content

Pomocí této vlastnosti můžeme nastavit vlastnosti align-content a justify-content zároveň. Nejprve napíšeme hodnotu vlastnosti align-content a poté hodnotu vlastnosti justify-content. Pokud chceme u obou vlastností stejnou hodnotu, tak ji stačí napsat jen jednou a aplikuje se na obě vlastnosti.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(350px);
    grid-template-rowsrepeat(350px);
    height250px;
    place-contentspace-between center/*nastavení vlastností align-content a justify-content zároveň */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>place-content</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

grid-auto-columns a grid-auto-rows

U gridu si nemusíme vždy definovat přesný počet řad nebo sloupců pomocí vlastností grid-template-columns a grid-template-rows. Některé řádky nebo sloupce se mohou generovat podle toho kolik do containeru přidáme položek. Pokud chceme určit jakou velikost budou tyto automaticky vygenerované sloupce/řádky mít, můžeme to udělat pomocí vlastností grid-auto-columns a grid-auto-rows.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columns50px 60px 70px;
    grid-auto-rows80px/* nastavení výšky automaticky vygenerovaných řádků */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-auto-columns | grid-auto-rows</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

grid-auto-flow

Vlastnost grid-auto-flow určuje, jak se budou položky do gridu přidávat když se budou automaticky generovat buňky. Pokud tuto vlastnost nastavíme například na hodnotu column, tak se budou vyplňovat sloupce (bude se vyplňovat shora dolů).

Hodnoty, které můžeme nastavit:

  • row: budou se vyplňovat řady (buňky budou přibývat po řádcích zleva doprava)
  • column: budou se vyplňovat sloupce (buňky budou přibývat po sloupcích shora dolů)
  • dense: položky se budou snažit umístit tam, kde je v gridu ještě místo a vlezou se tam
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columns50px 60px 70px;
    grid-template-rows50px 60px;
    grid-auto-flowcolumn/* automaticky vygenerované buňky budou přibývat po sloupcích */
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-auto-flow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

grid

Tato vlastnost je zkratkou pro tyto vlastnosti: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns a grid-auto-flow. Jak to funguje jsem moc nepochopil, asi je to trochu složitější. Pokud chcete, můžete se podívat třeba zde.

grid-column-start, grid-column-end, grid-row-start a grid-row-end

Pomocí těchto vlastností můžeme položce v containeru nastavit na jakém místě v gridu se zobrazí. Pomocí vlastností grid-column-start a grid-row-start nastavujeme kde položka začíná a pomocí vlastností grid-column-end a grid-row-end nastavujeme kde končí. Nastavujeme vždy číslo čáry (buňky ne).

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(360px);
    grid-template-rowsrepeat(360px);
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}

.special-item {
    grid-column-start2/* položka začíná od druhé sloupcové čáry */
    grid-row-start2/* položka začíná od druhé řádkové čáry */
    grid-column-end4/* položka končí u čtvrté sloupcové čáry */
    grid-row-end3/* položka končí u třetí řádkové čáry */
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-column-start | grid-column-end | grid-row-start | grid-row-end</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
    </div>
</body>
</html>
1
2

Pokud jsme si při definování gridu pojmenovali čáry gridu, tak je můžeme použít namísto čísel čar.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    /* pojmenování čar při definování gridu */
    grid-template-columns[prvni] 60px [druha] 60px [treti] 60px [ctvrta];
    grid-template-rows[prvni] 60px [druha] 60px [treti] 60px [ctvrta];
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}

.special-item {
    grid-column-startdruha/* použití jmen čar namísto jejich čísel */
    grid-row-startdruha;
    grid-column-endctvrta;
    grid-row-endtreti;
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-column-start | grid-column-end | grid-row-start | grid-row-end</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
    </div>
</body>
</html>
1
2

Pokud nechceme nastavovat grid-column-end nebo grid-row-end pomocí čísla nebo jména čáry, tak můžeme použít při jejich nastavování slovo span, které nám namísto toho umožní stanovit kolik buněk položka obsadí.

.special-item {
    grid-column-start: 2;
    grid-row-start2;
    grid-column-endspan 2/* stejné jako: 4 */
    grid-row-endspan 1/* stejné jako: 3 */
}

grid-column a grid-row

Tyto vlastnosti jsou zkratkou pro vlastnosti grid-column-start + grid-column-end a grid-row-start + grid-row-end. Vždy u nich nejprve napíšeme startovací čáru, potom znak "/" a konečnou čáru (nebo span).

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(360px);
    grid-template-rowsrepeat(360px);
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
}

.special-item {
    grid-column2 / span 2/* zkratka pro grid-column-start a grid-column-end */
    grid-row2 / span 1/* zkratka pro grid-row-start a grid-row-end */
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-column | grid-row</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
    </div>
</body>
</html>
1
2

grid-area

Touto vlastností můžeme položce nastavit umístění v gridu podle pojmenované části gridu. Pojmenovat část gridu můžeme pomocí vlastnosti grid-template-areas.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;
    grid-template-columnsrepeat(460px);
    grid-template-rowsrepeat(360px);
    grid-template-areas"header header header header" /* určení a pojmenování částí gridu */
                                         "main main . sidebar"
                                         "footer footer footer footer";
}

.header {
    background-colororangered;
    font-size16px;
    grid-areaheader/* element zabere část gridu, která se jmenuje header */
}
.main {
    background-colorblueviolet;
    font-size16px;
    grid-areamain/* element zabere část gridu, která se jmenuje main */
}
.sidebar {
    background-colororange;
    font-size16px;
    grid-areasidebar/* element zabere část gridu, která se jmenuje sidebar */
}
.footer {
    background-colorpink;
    font-size16px;
    grid-areafooter/* element zabere část gridu, která se jmenuje footer */
}
<!DOCTYPE html>
<html>
<head>
    <title>grid-area</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">main</div>
        <div class="sidebar">sidebar</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>
header
main
sidebar

Ještě můžeme tuto vlastnost použít jako zkratku pro vlastnosti grid-column-start, grid-column-end, grid-row-start a grid-row-end dohromady. Pokud vlastnost pro tento účel chceme použít, tak napíšeme hodnotu v tomto tvaru: grid-row-start / grid-column-start / grid-row-end / grid-column-end.

.special-item {
    grid-area1 / 4 / 4 / 6/* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
}

justify-self

Pomocí této vlastnosti můžeme položku v buňce gridu zarovnat horizontálně. Pokud tuto vlastnost nastavíme například na hodnotu center, tak se položka v buňce zarovná na střed.

Hodnoty, které můžeme nastavit:

  • start: položka se zarovná k počáteční hraně buňky
  • end: položka se zarovná ke konečné hraně buňky
  • center: položka se zarovná do středu buňky
  • stretch: položka se roztáhne přes celou šířku buňky
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(360px);
    grid-template-rowsrepeat(360px);
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
    width40px;
    height40px;
}

.special-item {
    justify-selfend/* zarovnání položky v buňce */
}
<!DOCTYPE html>
<html>
<head>
    <title>justify-self</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

align-self

Pomocí této vlastnosti můžeme položku v buňce gridu zarovnat vertikálně. Pokud tuto vlastnost nastavíme například na hodnotu center, tak se položka v buňce zarovná na střed.

Hodnoty, které můžeme nastavit:

  • start: položka se zarovná k počáteční hraně buňky
  • end: položka se zarovná ke konečné hraně buňky
  • center: položka se zarovná do středu buňky
  • stretch: položka se roztáhne přes celou výšku buňky
.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(360px);
    grid-template-rowsrepeat(360px);
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
    width40px;
    height40px;
}

.special-item {
    align-selfend/* zarovnání položky v buňce */
}
<!DOCTYPE html>
<html>
<head>
    <title>align-self</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

place-self

Tato vlastnost je zkratkou pro vlastnosti align-self a justify-self. Můžeme je tedy nastavit zároveň. Nejdříve napíšeme hodnotu align-self, potom mezeru a hodnotu justify-self.

.container {
    displaygrid;
    background-colorlightgreen;
    margin10px;
    padding5px;

    grid-template-columnsrepeat(360px);
    grid-template-rowsrepeat(360px);
}

.container div {
    background-colororangered;
    border2px solid green;
    font-size16px;
    width40px;
    height40px;
}

.special-item {
    place-selfcenter end/* zkratka pro vlastnosti align-self a justify-self */
}
<!DOCTYPE html>
<html>
<head>
    <title>place-self</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>1</div>
        <div class="special-item">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9