Ostatnio edytowany:

grid-auto-rows

Autor: Virtual Patriot

Opis właściwości grid-auto-rows

Za pomocą właściwości grid-auto-rows możemy określić domyślny rozmiar wysokości wszystkich wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

każda wysokość związana z właściwością grid-auto-rows tyczy się wysokości logicznej

właściwość grid-auto-rows nie oddziałuje na rozmiar wysokości tych wierszy, których rozmiar wysokości został przez nas określony za pomocą właściwości grid-template-rows

Dodatkowe techniczne informacje o właściwości grid-auto-rows

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości grid-auto-rows

Firefox

tak

Nie interpretuje wartości kombinacja.

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-auto-rows

rozmiar

Opis

Za pomocą właściwości grid-auto-rows oraz wybranej wartości należącej do składnika size pierwszego wzorca wartości właściwości grid-template-rows (z wyłączeniem funkcji repeat()) możemy określić domyślny rozmiar wysokości wszystkich wierszy budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Przykład

  grid-auto-rows:50px;
div-1
div-2
div-3

Domyślny rozmiar wysokości wszystkich wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 50 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-rows" wraz z wartością "50px".

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-auto-rows:50px;
        grid-auto-columns:75px;
        background-color:#CBFFFF;
      }

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

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

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

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

  <body>

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

  </body>
</html>

kombinacja wartości

Opis

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości grid-auto-rows możemy sprawić, że kolejne poszczególne wiersze budujące siatkę interesującego nas elementu HTML tworzącego układ siatki będą posiadały różny domyślny rozmiar wysokości.

Podana przez nas kombinacja wartości właściwości "grid-auto-rows" nie może zawierać wartości globalnych.

Przykład

  grid-auto-rows:80px 40px;
div-1
div-2
div-3

Domyślny rozmiar wysokości wszystkich nieparzystych wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 80 pikseli, natomiast domyślny rozmiar wysokości wszystkich parzystych wierszy budujących siatkę przykładowego elementu "div#gridbox" wynosi 40 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-auto-rows" wraz z następującą kombinacją wartości: "80px 40px".

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-auto-rows:80px 40px;
        grid-auto-columns:75px;
        background-color:#CBFFFF;
      }

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

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

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

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

  <body>

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

  </body>
</html>