☰ open

Grid vlasnosti

CSS grid je sada vlastností pro tvorbu layoutu vsazeného do pravidelné mřížky.

Grid můžeme definovat jako mřížku v obou směrech – v řádcích i sloupcích.

grid-template-columns

Vlastnost grid-template-columns definuje počet a šířku sloupců v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.

CodePen

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
}

Tento kód vytvoří grid se třemi sloupci, kde první a třetí sloupec mají šířku 100 pixelů a druhý sloupec má šířku 200 pixelů.

grid-template-rows

Vlastnost grid-template-rows definuje počet a výšku řádků v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.

CodePen


 .container {
    display: grid;
    grid-template-rows: 100px 150px;
}

Tento kód vytvoří grid se dvěma řádky, kde první řádek má výšku 100 pixelů a druhý řádek má výšku 150 pixelů.

grid-gap

Vlastnost grid-gap definuje mezery mezi řádky a sloupci v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em atd.


 .container {
    display: grid;
    grid-gap: 10px;
}

Tento kód vytvoří mezeru 10 pixelů mezi všemi řádky a sloupci v gridu.

grid-template-areas

Vlastnost grid-template-areas umožňuje pojmenovat oblasti v gridu a usnadňuje tak umisťování položek do těchto oblastí.

Hodnoty jsou zadány jako řetězce, kde každý řetězec představuje řádek v gridu a názvy oblastí jsou odděleny mezerami.


 .container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

Tento kód vytvoří grid se třemi řádky a dvěma sloupci, kde první řádek obsahuje oblast "header" přes oba sloupce, druhý řádek obsahuje oblasti "sidebar" a "content", a třetí řádek obsahuje oblast "footer" přes oba sloupce.

grid-auto-rows a grid-auto-columns

Vlastnosti grid-auto-rows a grid-auto-columns definují výšku řádků a šířku sloupců, které jsou automaticky přidávány do gridu, pokud počet položek přesahuje počet definovaných řádků nebo sloupců.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.


 .container {
    display: grid;
    grid-auto-rows: 100px;
    grid-auto-columns: 150px;
}

Tento kód zajistí, že každý automaticky přidaný řádek bude mít výšku 100 pixelů a každý automaticky přidaný sloupec bude mít šířku 150 pixelů.

CodePen

Celkový příklad

Zde je příklad, který kombinuje všechny výše uvedené vlastnosti:


.container {
display: grid;
gap: 0.85em; 
grid-template-columns: 1fr 2fr 1fr ;
grid-template-rows: auto 1fr auto;
}

Tento kód vytvoří grid s třemi sloupci a třemi řádky kde sloupce mají šířky v poměru 1:2:1

Sloupce mají šířky v poměru 1:2:1 a zabírají veškerý dostupný prostor

Tři řádky. První dle obsahu, druhý zbytetk dostupné výšky, třetí výška dle obsahu

Mezera mezi položkami je nastavena na 0.85em.

grid-template-columns

grid-template-rows

grid-gap

grid-template-areas

grid-auto-rows

grid-auto-columns

1

2

3

Stejný příklad naplněný textem

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima deleniti odio possimus deserunt. Incidunt officia nisi dicta eaque similique, ex explicabo, illo corrupti sequi maiores soluta quas debitis necessitatibus itaque!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab, doloremque beatae.

Nejezchleba

Není nutno, není nutno, aby bylo přímo veselo.

Hlavně nesmí býti smutno, natož, aby se brečelo.

grid-template-areas

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet blanditiis facilis amet maxime quis libero soluta quidem eius minima ducimus, pariatur, perspiciatis expedita cumque culpa quaerat dicta a! Iure, voluptatum.

grid-auto-rows

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse commodi mollitia harum illo sint itaque magni alias. Aliquid officia molestias odit fuga quo deserunt culpa delectus iusto veniam ex.

grid-auto-columns

1

2

3

Příklad s grid-template-areas

Zde je příklad použití vlastnosti grid-template-areas pro vytvoření layoutu s hlavičkou, postranním panelem, obsahem a patičkou:

CodePen


.container_1{ 
    display: grid;
    grid-template-areas: 
        'header header header'
        'sidebar content content'
        'footer footer footer';
}

Tento kód vytvoří grid s třemi řádky a třemi sloupci

první řádek obsahuje oblast "header" přes všechny tři sloupce
druhý řádek obsahuje oblasti "sidebar" a "content"
třetí řádek obsahuje oblast "footer" přes všechny tři sloupce

O nás O Vás Služby Kontakt

Obsah

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste quibusdam aperiam atque eaque aliquid nisi, nam tenetur doloremque excepturi, non ex sed nihil id eos veniam doloribus animi blanditiis beatae.

Pravý sloupec

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.

petr.ondrisek@outlook.cz

Příklad

Ukázka použití grid-template-areas v praxi.

CodePen


        .container_2{ 
    display: grid;
    grid-template-areas: 
        'header header header header'
        'leva main main pravy'
        'pata pata pata pata';
    gap: 10px;

grid-template-rows: auto 1fr auto;/* tři řádky, první a třetí se přizpůsobí obsahu, druhý zabere zbytek dostupného prostoru */

}

O nás O Vás Služby Kontakt

Obsah

pravý sloupec

lorem
ipsum
dolor
sit
amet

petr.ondrisek@outlook.cz

Poznámka: Nepříjemnou vlastností totoho příkladu je, že se šířka sloupců je automatická a přízpůsobujese obsahu.

Pro lepší kontrolu nad šířkou sloupců je vhodné kombinovat vlastnost grid-template-areas s vlastnostmi grid-template-columns a grid-template-rows.

Také je možné použít vlastnosti grid-template-columns a grid-template-rows pro přesné nastavení šířek a výšek sloupců a řádků.

Hodnoty šířky sloupců a výšky řádků mohou být definovány pomocí jednotek jako px, em, rem nebo fr (pro poměrné rozdělení prostoru).

Pro šířku se však osvědčila hodnota vw, která odpovídá šířce viewportu.

Například:

  
        .container_3{   
    display: grid;
    grid-template-areas: 
        'header header header header'
        'leva main main pravy'
        'pata pata pata pata';  
    grid-template-columns: 20vw 1fr 1fr 20vw;
    grid-template-rows: auto 1fr auto;      
}

Tento kód vytvoří grid s pevnou šířkou levého a pravého sloupce 20% šířky viewportu a střední sloupce zabírají zbytek dostupného prostoru.

CodePen

O nás O Vás Služby Kontakt

Obsah

pravý sloupec

lorem
ipsum
dolor
sit
amet

petr.ondrisek@outlook.cz

Poznámka: U odstavce je třeba omezit šířku na 80% šířky viewportu (max-width:80vw;).

Poznámka: Pozor na nízká rozlišení, obsah se pak může nepříjemně zúžit :-)

Další příklad Gridu pomocí definicí se span

Header (span 5)

Left Sidebar (span 3)

Right Sidebar (span 3)

Footer (span 5)

Main Content (span 3x3)

Tento příklad ukazuje, jak vytvořit layout s hlavičkou, dvěma postranními panely, hlavním obsahem a patičkou pomocí vlastnosti span pro určení počtu sloupců nebo řádků, které má každá položka zabírat.

Hlavička a patička zabírají všechny sloupce (span 5), levý a pravý postranní panel zabírají tři řádky (span 3) a hlavní obsah zabírá tři sloupce a tři řádky (span 3x3).

CodePen


            .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1 {
    grid-column: span 5 / span 5;
}

.div2 {
    grid-row: span 3 / span 3;
    grid-row-start: 2;
}

.div3 {
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 2;
}

.div4 {
    grid-column: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div5 {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 2;
}

Poznámka: Vlastnosti `grid-column` a `grid-row` používají syntaxi 'span / span' pro určení počtu sloupců nebo řádků, které má každá položka zabírat.

Takovýto layout lze vytvořit pomocí vlastnosti `span`.

Počítání gridu se span

V gridu se počítají mřížky.

První vodorovná mřížka je na pozici O a má číslo 1

První svislá mřížka je na pozici 0 a má číslo 1

HTML kousky

width:calc()

Barvy u zátržítek a boxů

Accordion

Hodiny

Hodiny

Single page

Single page

Pricing card

Fluid Layout with Flex

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification

Grid vlasnosti

CSS grid je sada vlastností pro tvorbu layoutu vsazeného do pravidelné mřížky.

Grid můžeme definovat jako mřížku v obou směrech – v řádcích i sloupcích.

grid-template-columns

Vlastnost grid-template-columns definuje počet a šířku sloupců v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.

CodePen

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
}

Tento kód vytvoří grid se třemi sloupci, kde první a třetí sloupec mají šířku 100 pixelů a druhý sloupec má šířku 200 pixelů.

grid-template-rows

Vlastnost grid-template-rows definuje počet a výšku řádků v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.

CodePen


 .container {
    display: grid;
    grid-template-rows: 100px 150px;
}

Tento kód vytvoří grid se dvěma řádky, kde první řádek má výšku 100 pixelů a druhý řádek má výšku 150 pixelů.

grid-gap

Vlastnost grid-gap definuje mezery mezi řádky a sloupci v gridu.

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em atd.


 .container {
    display: grid;
    grid-gap: 10px;
}

Tento kód vytvoří mezeru 10 pixelů mezi všemi řádky a sloupci v gridu.

grid-template-areas

Vlastnost grid-template-areas umožňuje pojmenovat oblasti v gridu a usnadňuje tak umisťování položek do těchto oblastí.

Hodnoty jsou zadány jako řetězce, kde každý řetězec představuje řádek v gridu a názvy oblastí jsou odděleny mezerami.


 .container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

grid-auto-rows a grid-auto-columns

Hodnoty můžeme zadat v různých jednotkách, například v pixelech, procentech, em, fr atd.


 .container {
    display: grid;
    grid-auto-rows: 100px;
    grid-auto-columns: 150px;
}

Tento kód zajistí, že každý automaticky přidaný řádek bude mít výšku 100 pixelů a každý automaticky přidaný sloupec bude mít šířku 150 pixelů.

CodePen

Celkový příklad

Zde je příklad, který kombinuje všechny výše uvedené vlastnosti:


.container {
display: grid;
gap: 0.85em; 
grid-template-columns: 1fr 2fr 1fr ;
grid-template-rows: auto 1fr auto;
}

Tento kód vytvoří grid s třemi sloupci a třemi řádky kde sloupce mají šířky v poměru 1:2:1

Sloupce mají šířky v poměru 1:2:1 a zabírají veškerý dostupný prostor

Tři řádky. První dle obsahu, druhý zbytetk dostupné výšky, třetí výška dle obsahu

Mezera mezi položkami je nastavena na 0.85em.

grid-template-columns

grid-template-rows

grid-gap

grid-template-areas

grid-auto-rows

grid-auto-columns

1

2

3

Stejný příklad naplněný textem

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab, doloremque beatae.

Nejezchleba

Není nutno, není nutno, aby bylo přímo veselo.

Hlavně nesmí býti smutno, natož, aby se brečelo.

grid-template-areas

grid-auto-rows

grid-auto-columns

1

2

3

Příklad s grid-template-areas

Zde je příklad použití vlastnosti grid-template-areas pro vytvoření layoutu s hlavičkou, postranním panelem, obsahem a patičkou:

CodePen


.container_1{ 
    display: grid;
    grid-template-areas: 
        'header header header'
        'sidebar content content'
        'footer footer footer';
}

Tento kód vytvoří grid s třemi řádky a třemi sloupci

první řádek obsahuje oblast "header" přes všechny tři sloupce
druhý řádek obsahuje oblasti "sidebar" a "content"
třetí řádek obsahuje oblast "footer" přes všechny tři sloupce

O nás O Vás Služby Kontakt

Obsah

Pravý sloupec

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.

petr.ondrisek@outlook.cz

Příklad

Ukázka použití grid-template-areas v praxi.

CodePen


        .container_2{ 
    display: grid;
    grid-template-areas: 
        'header header header header'
        'leva main main pravy'
        'pata pata pata pata';
    gap: 10px;

grid-template-rows: auto 1fr auto;/* tři řádky, první a třetí se přizpůsobí obsahu, druhý zabere zbytek dostupného prostoru */

}

O nás O Vás Služby Kontakt

Obsah

pravý sloupec

lorem
ipsum
dolor
sit
amet

petr.ondrisek@outlook.cz

Poznámka: Nepříjemnou vlastností totoho příkladu je, že se šířka sloupců je automatická a přízpůsobujese obsahu.

Pro lepší kontrolu nad šířkou sloupců je vhodné kombinovat vlastnost grid-template-areas s vlastnostmi grid-template-columns a grid-template-rows.

Také je možné použít vlastnosti grid-template-columns a grid-template-rows pro přesné nastavení šířek a výšek sloupců a řádků.

Hodnoty šířky sloupců a výšky řádků mohou být definovány pomocí jednotek jako px, em, rem nebo fr (pro poměrné rozdělení prostoru).

Pro šířku se však osvědčila hodnota vw, která odpovídá šířce viewportu.

Například:

  
        .container_3{   
    display: grid;
    grid-template-areas: 
        'header header header header'
        'leva main main pravy'
        'pata pata pata pata';  
    grid-template-columns: 20vw 1fr 1fr 20vw;
    grid-template-rows: auto 1fr auto;      
}

Tento kód vytvoří grid s pevnou šířkou levého a pravého sloupce 20% šířky viewportu a střední sloupce zabírají zbytek dostupného prostoru.

CodePen

O nás O Vás Služby Kontakt

Obsah

pravý sloupec

lorem
ipsum
dolor
sit
amet

petr.ondrisek@outlook.cz

Poznámka: U odstavce je třeba omezit šířku na 80% šířky viewportu (max-width:80vw;).

Poznámka: Pozor na nízká rozlišení, obsah se pak může nepříjemně zúžit :-)

Další příklad Gridu pomocí definicí se span

Header (span 5)

Left Sidebar (span 3)

Right Sidebar (span 3)

Footer (span 5)

Main Content (span 3x3)

Hlavička a patička zabírají všechny sloupce (span 5), levý a pravý postranní panel zabírají tři řádky (span 3) a hlavní obsah zabírá tři sloupce a tři řádky (span 3x3).

CodePen


            .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1 {
    grid-column: span 5 / span 5;
}

.div2 {
    grid-row: span 3 / span 3;
    grid-row-start: 2;
}

.div3 {
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 2;
}

.div4 {
    grid-column: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div5 {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 2;
}

Poznámka: Vlastnosti `grid-column` a `grid-row` používají syntaxi 'span / span' pro určení počtu sloupců nebo řádků, které má každá položka zabírat.

Takovýto layout lze vytvořit pomocí vlastnosti `span`.

Počítání gridu se span

V gridu se počítají mřížky.

První vodorovná mřížka je na pozici O a má číslo 1

První svislá mřížka je na pozici 0 a má číslo 1

VSC + HTML + CSS

Grid vlasnosti

grid-template-columns

grid-template-rows

grid-gap

grid-template-areas

grid-auto-rows a grid-auto-columns

Celkový příklad

1

2

3

Stejný příklad naplněný textem

grid-template-areas

grid-auto-rows

grid-auto-columns

1

2

3

Příklad s grid-template-areas

Petr Ondříšek

Obsah

Pravý sloupec

Příklad

Petr Ondříšek

Obsah

pravý sloupec

Petr Ondříšek

Obsah

pravý sloupec

Další příklad Gridu pomocí definicí se span

Počítání gridu se span

HTML kousky

width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

Color

Grid vlasnosti

grid-template-columns

grid-template-rows

grid-gap

grid-template-areas

grid-auto-rows a grid-auto-columns

Celkový příklad

1

2

3

Stejný příklad naplněný textem

grid-template-areas

grid-auto-rows

grid-auto-columns

1

2

3

Příklad s grid-template-areas

Petr Ondříšek

Obsah

Pravý sloupec

Příklad

Petr Ondříšek

Obsah

pravý sloupec

Petr Ondříšek

Obsah

pravý sloupec

Další příklad Gridu pomocí definicí se span

Počítání gridu se span

HTML CSS

itNetwork

Odkazy

Klávesové zkratky