1. Úvodná stránka
  2. CSS

Grid-template-oblasti css

Príklady kódu

3
0

grid-template-oblasti css 

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
0
0

ako používať prázdne miesto s oblasťami šablóny mriežky css 

.container {
  display: grid;

  grid-template-columns: 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
    "head head . side"
    "main main . side"
    "footer footer footer footer";
}
0
0

oblasti šablón mriežky 

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

Podobné stránky

Podobné stránky s príkladmi

oblasti šablón mriežky
grid-template-oblasti css
calc () css

V iných jazykoch

Táto stránka je v iných jazykoch

Русский
..................................................................................................................
Ссылка
English
..................................................................................................................
Link
Italiano
..................................................................................................................
Link
Polski
..................................................................................................................
Link
Română
..................................................................................................................
Legătură
한국어
..................................................................................................................
링크
हिन्दी
..................................................................................................................
लिंक
Français
..................................................................................................................
Lien
Türk
..................................................................................................................
Atıf
Česk
..................................................................................................................
Odka
Português
..................................................................................................................
Referênci
ไทย
..................................................................................................................
เชื่อมโยง
中文
..................................................................................................................
链接
Español
..................................................................................................................
Referencia
Балгарскі
..................................................................................................................
Спасылка
Íslensk
..................................................................................................................
Link

Populárne v tejto kategórii

Populárne stránky s príkladmi v kategórii

nie posledné dieťa css
veľké písmená css
CSS loading spinner
písmo roboto css
CSS obrazový filter čiernobiely
centrovanie prvkov css
žiadne opakovanie pozadia
fotografický kruh css
textový štrajk css
Otočiť obrázok na pozadí css
statické pozadie html
CSS animácia
ako vytvoriť písma respnsive
pozícia absolútny stred
stredové prvky vertikálne v div
Farba textu ako gradient css