Autor publikacji
Virtual Patriot - Administrator

grid-template-areas

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości grid-template-areas

Za pomocą właściwości grid-template-areas możemy określić nazwy poszczególnych obszarów, które chcemy, aby występowały na siatce interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

brak

Informacje techniczne o właściwości grid-template-areas

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-template-areas

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości grid-template-areas

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości grid-template-areas.

Domyślnie na siatce elementu HTML tworzącego układ siatki nie występują żadne obszary posiadające swoją nazwę.

Przykład

  grid-template-areas:none;
div-1
div-2
div-3
div-4

Na siatce przykładowego elementu "div#gridbox" nie występują żadne obszary posiadające swoją nazwę.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(6, 70px);
        grid-template-columns:repeat(6, 70px);
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-row-start:1;
        grid-row-end:3;
        grid-column-start:1;
        grid-column-end:5;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:1;
        grid-row-end:5;
        grid-column-start:5;
        grid-column-end:7;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:5;
        grid-row-end:7;
        grid-column-start:3;
        grid-column-end:7;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:3;
        grid-row-end:7;
        grid-column-start:1;
        grid-column-end:3;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid-template-areas oraz z góry zdefiniowanego wzorca wartości możemy określić nazwy poszczególnych obszarów, które chcemy, aby występowały na siatce interesującego nas elementu HTML tworzącego układ siatki.

Składniki wzorca wartości właściwości grid-template-areas

Ważne

możemy podać kilka składników area, dzięki czemu na siatce elementu HTML tworzącego układ siatki może zostać utworzona większa liczba obszarów posiadających swoją nazwę. Każdy składnik area należy podać pomiędzy pojedynczym lub podwójnym cudzysłowem. Każdy składnik area traktowany jest przez przeglądarkę internetową jako kolejny nowy wiersz występujący na siatce elementu HTML tworzącego układ siatki.

Przykładowe zapisy

'aa'

'aa bb'

'aa aa'
'bb bb'

'aa bb'
'aa cc'
'aa dd'

'aa aa bb'
'dd .. bb'
'dd cc cc'

'aa aa bb'
'cc .. bb'
'cc .. ..'
'dd dd dd'

area

Składnik area jest wymaganym składnikiem wzorca wartości właściwości grid-template-areas. Składnik area określa nazwę obszaru, który chcemy, aby występował na siatce interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartość własna lub znak . lub sekwencja znaków .

Sposób podawania

możemy podać większą liczbę nazw, dzięki czemu na siatce elementu HTML tworzącego układ siatki może zostać utworzona większa liczba obszarów. Każdą kolejną nazwę obszaru należy oddzielić od poprzedniej nazwy obszaru przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Każda nazwa obszaru traktowana jest przez przeglądarkę internetową jako nowa komórka występująca na siatce elementu HTML tworzącego układ siatki.

jeżeli zdecydowaliśmy się na to, aby podany przez nas wzorzec wartości właściwości grid-template-areas składał się z kilku składników area, wtedy wszystkie składniki area muszą zawierać tę samą liczbę komórek, w przeciwnym wypadku podany przez nas wzorzec wartości właściwości grid-template-areas będzie traktowany przez przeglądarkę internetową jako błędny wzorzec wartości schemat tworzenia prawidłowej liczby komórek dla obszaru siatki

ponadto (nie tyczy się komórek nieposiadających swojej nazwy, czyli tych komórek, które zostały przez nas oznaczone za pomocą znaku . lub sekwencji znaków .) gdy podany przez nas wzorzec wartości właściwości grid-template-areas zawiera komórki o tych samych nazwach, wtedy wszystkie wspomniane komórki razem muszą formować obszar w kształcie prostokąta, dzięki czemu wspomniany prostokąt będzie traktowany przez przeglądarkę internetową jako jeden cały obszar zajmujący kilka sąsiednich komórek na siatce elementu HTML tworzącego układ siatki, w przeciwnym wypadku podany przez nas wzorzec wartości właściwości grid-template-areas będzie traktowany przez przeglądarkę internetową jako błędny wzorzec wartości schemat tworzenia prawidłowego kształtu obszaru dla siatki

Informacje dodatkowe

każdy obszar występujący na siatce elementu HTML tworzącego układ siatki posiada cztery krawędzie:

  • początkowa krawędź wierszowa obszaru znajduje się na najbliższej linii wierszowej siatki, po stronie początkowej krawędzi blokowej elementu HTML tworzącego dany układ siatki, ponadto gdy dany obszar posiada przykładową nazwę a, wtedy nazwą początkowej krawędzi wierszowej danego obszaru jest nazwa a-start
  • końcowa krawędź wierszowa obszaru znajduje się na najbliższej linii wierszowej siatki, po stronie końcowej krawędzi blokowej elementu HTML tworzącego dany układ siatki, ponadto gdy dany obszar posiada przykładową nazwę a, wtedy nazwą końcowej krawędzi wierszowej danego obszaru jest nazwa a-end
  • początkowa krawędź kolumnowa obszaru znajduje się na najbliższej linii kolumnowej siatki, po stronie początkowej krawędzi liniowej elementu HTML tworzącego dany układ siatki, ponadto gdy dany obszar posiada przykładową nazwę a, wtedy nazwą początkowej krawędzi kolumnowej danego obszaru jest nazwa a-start
  • końcowa krawędź kolumnowa obszaru znajduje się na najbliższej linii kolumnowej siatki, po stronie końcowej krawędzi liniowej elementu HTML tworzącego dany układ siatki, ponadto gdy dany obszar posiada przykładową nazwę a, wtedy nazwą końcowej krawędzi kolumnowej danego obszaru jest nazwa a-end

do między innymi nazwy obszaru lub nazw poszczególnych krawędzi obszaru możemy odwołać się w konkretnym celu za pomocą następujących właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area

Wartość domyślna

brak

grid-template-areas:'aa aa aa aa bb bb' 'aa aa aa aa bb bb' 'dd dd .. .. bb bb' 'dd dd .. .. bb bb' 'dd dd cc cc cc cc' 'dd dd cc cc cc cc';

schemat tworzenia nazw obszarów na siatce oraz nazw wierszowych i kolumnowych linii tworzących dany obszar

Przykład

grid-template-areas:'aa aa aa aa bb bb' 
                    'aa aa aa aa bb bb' 
                    'dd dd .. .. bb bb' 
                    'dd dd .. .. bb bb' 
                    'dd dd cc cc cc cc' 
                    'dd dd cc cc cc cc';
div-1
div-2
div-3
div-4

Na siatce przykładowego elementu "div#gridbox" występują cztery obszary posiadające swoją nazwę ("aa", "bb", "cc", "dd") oraz jeden obszar nieposiadający swojej nazwy, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-template-areas" wraz z następującymi wartościami: " 'aa aa aa aa bb bb' 'aa aa aa aa bb bb' 'dd dd .. .. bb bb' 'dd dd .. .. bb bb' 'dd dd cc cc cc cc' 'dd dd cc cc cc cc' ".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #gridbox {
        display:grid;
        grid-template-rows:repeat(6, 70px);
        grid-template-columns:repeat(6, 70px);
        grid-template-areas:'aa aa aa aa bb bb'
                            'aa aa aa aa bb bb'
                            'dd dd .. .. bb bb'
                            'dd dd .. .. bb bb'
                            'dd dd cc cc cc cc'
                            'dd dd cc cc cc cc';
        background-color:#7DCDE8;
      }

      #gridbox > div {
        padding:0.5em;
        font-size:1.3em;
      }

      #gridbox > :nth-child(1) {
        grid-area:aa;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-area:bb;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-area:cc;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-area:dd;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div>div-1</div>
      <div>div-2</div>
      <div>div-3</div>
      <div>div-4</div>
    </div>

  </body>
</html>