VSC + HTML + CSS

CSS Gride Layout Module

Modul rozvržení mřížky (Gride) CSS nabízí systém rozvržení založený na mřížce.

Mřížku tvoří řádky, sloupce a mezery (Row, Column a Gap)

Je jej vhodné použít u složitějších stránek, kde by užití CSS Flexboxu bylo krkolomné

Mezery

• colum-gap
• row-gap
• gap

Příklad

Takto lze nastavit šířku mezery mezi sloupci

.grid-container {
  display: grid;
  column-gap: 50px;
}

začátek a konec položky v sloupci

• grid-colum-start
• grid-colum-end

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Příklad

Gride Lines

začátek a konec položky v řádku

• grid-colum-start
• grid-colum-end

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Příklad

Gride Lines

grid-columns

Nastavte řetězec "item1" tak, aby začínal ve sloupci 1 a končil před sloupcem 5:

.item1 {
  grid-column: 1 / 5;
}

.item1 {grid-column: 1 / 5;}

Nastavte "item1" tak, aby začínal na sloupci 1 a rozprostíral se na 3 sloupcích:

.item1 {
  grid-column: 1 / span 3;
}

.item1 {grid-column: 1 / span 3;}

Poznámka: mezi span a 3 musí být mezera!

.item2 {
  grid-column: 2 / span 3;
}

.item2 {grid-column: 2 / span 3;}

grid-template-columns

vlastnost grid-templare-columns určuje počet sloupců.

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

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

grid-template-columns

Počet řádků se určuje počtem bloků v v grid-container

grid-template-columns 2

gride-template-columns

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

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

grid-template-columns

Vlastnost grid-template-rows

Tato vlastnost definuje výšku každého řádku.grid-template-rows

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;
}

grid-template-rows

grid-template-rows 2

Vlastnost justify-content

Vlastnost justify-content slouží k zarovnání celého rastru uvnitř kontejneru.justify-content

Celková šířka mřížky musí být menší než šířka kontejneru, aby měla vlastnost nějaký efekt.

justify-content: space-evenly;

Hodnota "space-evenly" dá sloupcům stejný prostor mezi nimi a kolem nich.

Hodnota je tedy stejná na okraji slupců a mezi sloupci.

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

justify_content: space-evenly;

justify-content: space-around;

Hodnota "space-around" dá sloupcům stejný prostor kolem nich.

Hodnota je tedy stejná na levém a pravém okraji slupců.

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

justify_content: space-evenly;

Vlastnost justify-content: space-between;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "space-between" poskytne sloupcům stejné množství mezery mezi nimi

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

justify_content: space-betwen;

Vlastnost justify-content: space-center;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "center" zarovná položky doprostřed kontejneru.

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

justify_content: centred;

Vlastnost justify-content: start;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "start" zarovná položky na začátek kontejneru.

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

justify_content: start;

Vlastnost justify-content: end;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "end" zarovná položky na konec kontejneru.

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

justify_content: end;

Vlastnost align-content

Tato vlastnost se používá ke svislému zarovnání celé mřížky uvnitř kontejneru.align-content

Poznámka: Celková výška mřížky musí být menší než výška kontejneru, aby měla vlastnost nějaký efekt.align-content

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

hodnoty align-content: center | space-evenly | space-around | space-between | start | end

align-content: center; align-content: space-evently; align-content: space-around; align-content: space-between; align-content: start; align-content: end;

Vlastnost grid-row:

Vlastnost definuje, na kterém řádku se má umístit položku.

Definujete, kde bude položka začínat a kde končit.

Poznámka: Tato vlastnost je zkrácenou vlastností pro vlastnosti: .grid-row | grid-row-start | grid-row-end

Chcete-li umístit položku, můžete se odkázat na čísla řádků nebo použít klíčové slovo "span"

Příklad: "item1" začíná na řádku 1 a končí na řádku 4.

.item1 {
  grid-row: 1 / 4;
}

grid-row:1 / 4;

Příklad: "item1" začíná na řádku 1 a končí na řádku 2( včetně-span).

.item1 {
  grid-row: 1 / span 2;
}

grid-row:1 / span 2;

grid-area

vlastnost grid-area specifikuje místo, kde se položka nachází.

Zkrácená syntaxe: je grid-row-start / grid-column-start / grid-row-end / grid-column-end vyjádřená číslem.

Zkrácená syntaxe: počáteční řádek / počáteční sloupek / konec řádku / konec sloupce vyjádřená číslem.

mezery mezi lomínky je nutné dodržet

Příklad

Nastavte řetězec "item8" tak, aby začínal na řádku 1 ve sloupci 2 a rozprostíral a končil 5 řádku a 6 sloupci

Poznámka:

konec se do položky nezapočítává, takže buňka se rozprostírá před uvedeným koncem

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

grid-area: 1 / 2 / 5 / ;6

Příklad

Nastavte řetězec "item1" tak, aby začínal na řádku 2 ve sloupci 1 a rozprostíral se na 2 řádcích a 3 sloupcích:

Poznámka:

Konec určený pomocí span (rozpětí) se do položky započítává (VČETNĚ)

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-area: 2 / 1 / span 2 / span 3;

grid-area

grid-area

grid-area můžeme také použít k pojmenování sloupců

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Poznámka

Každý řádek je definován apostrofy (' ')

Sloupce v každém řádku jsou definovány uvnitř apostrofů a jsou odděleny mezerou.

Znak tečky představuje položku mřížky bez názvu.

Pojmenování sloupců pomocí grid-area

CSS Gride Layout Module

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(230, 230, 230, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
</body>
</html>

Gride Layout

Gride Layout 2

Rozvržení mřížky

Rozvržení mřížky se skládá z nadřazeného elementu s více podřízenými elementy

U rodičovského elemntu musí být nastavena vlastnost display: grid; nebo display: inline-grid;

Podřízené položky se tak stávají automaticky buňkami mřížky

display: grid; vytvoří mřížku na úrovni celého bloku

display: grid;

display: inline-grid; vytvoří vložení mřížkový kontejner

display:inline-grid;

Šablona CSS

Šablona CSS RWD 1

Šablona CSS

Šablona CSS RWD 2

Šablona CSS

Šablona CSS RWD 3

Všechny vlastnosti mřížky

W3schools

Všechny vlastnosti mřížky

Šablony rozvržení CSS Layout

W3schools

Šablony rozložení CSS

</style>

CSS Gride Layout Module

Modul rozvržení mřížky (Gride) CSS nabízí systém rozvržení založený na mřížce.

Mřížku tvoří řádky, sloupce a mezery (Row, Column a Gap)

Je jej vhodné použít u složitějších stránek, kde by užití CSS Flexboxu bylo krkolomné

Mezery

• colum-gap
• row-gap
• gap

Příklad

Takto lze nastavit šířku mezery mezi sloupci

.grid-container {
  display: grid;
  column-gap: 50px;
}

začátek a konec položky v sloupci

• grid-colum-start
• grid-colum-end

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Příklad

Gride Lines

začátek a konec položky v řádku

• grid-colum-start
• grid-colum-end

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Příklad

Gride Lines

grid-columns

Nastavte řetězec "item1" tak, aby začínal ve sloupci 1 a končil před sloupcem 5:

.item1 {
  grid-column: 1 / 5;
}

.item1 {grid-column: 1 / 5;}

Nastavte "item1" tak, aby začínal na sloupci 1 a rozprostíral se na 3 sloupcích:

.item1 {
  grid-column: 1 / span 3;
}

.item1 {grid-column: 1 / span 3;}

Poznámka: mezi span a 3 musí být mezera!

.item2 {
  grid-column: 2 / span 3;
}

.item2 {grid-column: 2 / span 3;}

grid-template-columns

vlastnost grid-templare-columns určuje počet sloupců.

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

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

grid-template-columns

Počet řádků se určuje počtem bloků v v grid-container

grid-template-columns 2

gride-template-columns

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

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

grid-template-columns

Vlastnost grid-template-rows

Tato vlastnost definuje výšku každého řádku.grid-template-rows

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;
}

grid-template-rows

grid-template-rows 2

Vlastnost justify-content

Vlastnost justify-content slouží k zarovnání celého rastru uvnitř kontejneru.justify-content

Celková šířka mřížky musí být menší než šířka kontejneru, aby měla vlastnost nějaký efekt.

justify-content: space-evenly;

Hodnota "space-evenly" dá sloupcům stejný prostor mezi nimi a kolem nich.

Hodnota je tedy stejná na okraji slupců a mezi sloupci.

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

justify_content: space-evenly;

justify-content: space-around;

Hodnota "space-around" dá sloupcům stejný prostor kolem nich.

Hodnota je tedy stejná na levém a pravém okraji slupců.

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

justify_content: space-evenly;

Vlastnost justify-content: space-between;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "space-between" poskytne sloupcům stejné množství mezery mezi nimi

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

justify_content: space-betwen;

Vlastnost justify-content: space-center;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "center" zarovná položky doprostřed kontejneru.

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

justify_content: centred;

Vlastnost justify-content: start;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "start" zarovná položky na začátek kontejneru.

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

justify_content: start;

Vlastnost justify-content: end;

Pomocí vlastnosti justify-content zarovnejte mřížku uvnitř kontejneru.

Hodnota "end" zarovná položky na konec kontejneru.

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

justify_content: end;

Vlastnost align-content

Tato vlastnost se používá ke svislému zarovnání celé mřížky uvnitř kontejneru.align-content

Poznámka: Celková výška mřížky musí být menší než výška kontejneru, aby měla vlastnost nějaký efekt.align-content

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

hodnoty align-content: center | space-evenly | space-around | space-between | start | end

align-content: center; align-content: space-evently; align-content: space-around; align-content: space-between; align-content: start; align-content: end;

Vlastnost grid-row:

Vlastnost definuje, na kterém řádku se má umístit položku.

Definujete, kde bude položka začínat a kde končit.

Poznámka: Tato vlastnost je zkrácenou vlastností pro vlastnosti: .grid-row | grid-row-start | grid-row-end

Chcete-li umístit položku, můžete se odkázat na čísla řádků nebo použít klíčové slovo "span"

Příklad: "item1" začíná na řádku 1 a končí na řádku 4.

.item1 {
  grid-row: 1 / 4;
}

grid-row:1 / 4;

Příklad: "item1" začíná na řádku 1 a končí na řádku 2( včetně-span).

.item1 {
  grid-row: 1 / span 2;
}

grid-row:1 / span 2;

grid-area

vlastnost grid-area specifikuje místo, kde se položka nachází.

Zkrácená syntaxe: je grid-row-start / grid-column-start / grid-row-end / grid-column-end vyjádřená číslem.

Zkrácená syntaxe: počáteční řádek / počáteční sloupek / konec řádku / konec sloupce vyjádřená číslem.

mezery mezi lomínky je nutné dodržet

Příklad

Nastavte řetězec "item8" tak, aby začínal na řádku 1 ve sloupci 2 a rozprostíral a končil 5 řádku a 6 sloupci

Poznámka:

konec se do položky nezapočítává, takže buňka se rozprostírá před uvedeným koncem

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

grid-area: 1 / 2 / 5 / ;6

Příklad

Nastavte řetězec "item1" tak, aby začínal na řádku 2 ve sloupci 1 a rozprostíral se na 2 řádcích a 3 sloupcích:

Poznámka:

Konec určený pomocí span (rozpětí) se do položky započítává (VČETNĚ)

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

grid-area: 2 / 1 / span 2 / span 3;

grid-area

grid-area

grid-area můžeme také použít k pojmenování sloupců

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Poznámka

Každý řádek je definován apostrofy (' ')

Sloupce v každém řádku jsou definovány uvnitř apostrofů a jsou odděleny mezerou.

Znak tečky představuje položku mřížky bez názvu.

Pojmenování sloupců pomocí grid-area

CSS Gride Layout Module

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(230, 230, 230, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
</body>
</html>

Gride Layout

Gride Layout 2

Rozvržení mřížky

Rozvržení mřížky se skládá z nadřazeného elementu s více podřízenými elementy

U rodičovského elemntu musí být nastavena vlastnost display: grid; nebo display: inline-grid;

Podřízené položky se tak stávají automaticky buňkami mřížky

display: grid; vytvoří mřížku na úrovni celého bloku

display: grid;

display: inline-grid; vytvoří vložení mřížkový kontejner

display:inline-grid;

Šablona CSS

Šablona CSS RWD 1

Šablona CSS

Šablona CSS RWD 2

Šablona CSS

Šablona CSS RWD 3

Všechny vlastnosti mřížky

W3schools

Všechny vlastnosti mřížky

Šablony rozvržení CSS Layout

W3schools

Šablony rozložení CSS

</style>