Autor publikacji
Virtual Patriot - Administrator

grid-column-gap

Data publikacji
Ostatnio edytowano

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

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

Informacje dodatkowe

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

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości grid-column-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-column-gap

rozmiar

Wyjaśnienie

Za pomocą właściwości grid-column-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 kolumnami siatki interesującego nas elementu HTML tworzącego układ siatki.

Rozmiar dodatkowego odstępu pomiędzy poszczególnymi kolumnami siatki elementu HTML tworzącego układ siatki sprawia, że znajdujące się pomiędzy wspomnianymi kolumnami linie kolumnowe siatki zyskują dodatkową grubość. Co w konsekwencji oznacza, że gdy któraś z linii kolumnowych siatki elementu HTML tworzącego układ siatki jest linią stanowiącą krawędź kolumnową 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 szerokości siatki

Przykład

  grid-column-gap:15px;
div#item

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

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-column-gap:15px;
        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>