Autor publikacji
Virtual Patriot - Administrator

grid-row-gap

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości grid-row-gap

Za pomocą właściwości grid-row-gap możemy określić rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

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

Informacje techniczne o właściwości grid-row-gap

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości grid-row-gap

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-row-gap

rozmiar

Wyjaśnienie

Za pomocą właściwości grid-row-gap oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki interesującego nas elementu HTML tworzącego układ siatki.

Rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki elementu HTML tworzącego układ siatki sprawia, że znajdujące się pomiędzy wspomnianymi wierszami linie wierszowe siatki zyskują dodatkową grubość. Co w konsekwencji oznacza, że gdy któraś z linii wierszowych siatki elementu HTML tworzącego układ siatki jest linią stanowiącą krawędź wierszową miejsca, do którego został przypisany element HTML, wtedy miejsce to nie przekracza wspomnianej dodatkowej grubości.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości siatki

Przykład

  grid-row-gap:30px;
div#item

Rozmiar dodatkowego odstępu pomiędzy poszczególnymi wierszami siatki przykładowego elementu "div#gridbox" wynosi 30 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-row-gap" wraz z wartością "30px".

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-row-gap:30px;
        background-color:#7DCDE8;
      }

      #item {
        grid-row-start:2;
        grid-row-end:6;
        grid-column-start:2;
        grid-column-end:6;
        font-size:1.3em;
        padding:0.5em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="gridbox">
      <div id="item">div#item</div>
    </div>

  </body>
</html>