Ostatnio edytowany:

grid-row-gap

Autor: Virtual Patriot

Opis 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

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

Opis

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:#CBFFFF;
      }

      #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>