Autor publikacji
Virtual Patriot - Administrator

grid-template-areas

Data publikacji
Ostatnio edytowano

Opis 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

Dodatkowe techniczne informacje 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

Opis

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

Opis

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

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.

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>