Autor publikacji
Virtual Patriot - Administrator

grid-template-columns

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości grid-template-columns

Za pomocą właściwości grid-template-columns możemy określić nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również możemy określić rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Informacje dodatkowe

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

Informacje techniczne o właściwości grid-template-columns

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości grid-template-columns

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

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości grid-template-columns.

Domyślnie poszczególne linie kolumnowe budujące siatkę elementu HTML tworzącego układ siatki nie posiadają swoich nazw, ponadto rozmiar szerokości poszczególnych kolumn budujących siatkę elementu HTML tworzącego układ siatki uzależniony jest od wartości właściwości grid-auto-columns.

Przykład

  grid-template-columns:none;
div-1
div-2
div-3
div-4
div-5

Poszczególne linie kolumnowe budujące siatkę przykładowego elementu "div#gridbox" nie posiadają swoich nazw, ponadto poszczególne kolumny budujące siatkę przykładowego elementu "div#gridbox" posiadają automatyczny rozmiar szerokości.

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;
        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;
      }

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

  <body>

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

  </body>
</html>

pierwszy wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid-template-columns oraz jednego z góry zdefiniowanych wzorców wartości możemy określić nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również możemy określić rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Składniki pierwszego wzorca wartości właściwości grid-template-columns

Ważne

możemy podać więcej par składników name size, dzięki czemu kolejne linie kolumnowe budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać swoją nazwę, a kolejne kolumny budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać określony rozmiar szerokości

Informacje dodatkowe

domyślnie każda linia kolumnowa budująca siatkę elementu HTML tworzącego układ siatki posiada swój własny numer (pierwsza linia kolumnowa posiada numer 1, druga linia kolumnowa posiada numer 2 itd.)

jedną z osi, jaką posiada każdy element HTML, jest oś liniowa. Oś liniowa ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML.

linie kolumnowe budujące siatkę elementu HTML tworzącego układ siatki układają się w obszarze zawartości tego elementu HTML (jedna po drugiej w szeregu od początkowej krawędzi liniowej do końcowej krawędzi liniowej)

do między innymi numeru linii kolumnowej siatki lub nazwy linii kolumnowej siatki możemy odwołać się w konkretnym celu za pomocą następujących właściwości CSS: grid-column-start, grid-column-end, grid-column, grid-area

Przykładowe zapisy

150px 200px 250px

[c1] 150px [c2] 30% [c3] 100px [c4]

[c1 y1] min-content [c2 y2] max-content [c3 y3]

[c1] 100px [c2] 1fr [c3] 2fr [c4]

[y1] 200px [y2] auto [y3]

[y1] minmax(auto, 300px) [y2] fit-content(400px) [y3]

repeat(5, 100px)

repeat(7, [c] auto [y])

repeat(10, [c] 10%) [c]

[c] repeat(3, 200px [c])

name

Składnik name nie jest wymaganym składnikiem wzorca wartości właściwości grid-template-columns. Składnik name określa nazwę linii kolumnowej budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartość własna (dodatkowo z wyłączeniem wartości span)

Sposób podawania

wybraną nazwę należy podać pomiędzy nawiasem kwadratowym [], ponadto jeżeli z jakiegoś powodu chcemy, aby dana linia kolumnowa budująca siatkę elementu HTML tworzącego układ siatki posiadała więcej niż jedną nazwę, wtedy do danego nawiasu kwadratowego należy dodać kolejną nazwę (wszystkie nazwy należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji))

Wartość domyślna

brak

size

Składnik size jest wymaganym składnikiem wzorca wartości właściwości grid-template-columns. Składnik size określa rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości elementu HTML tworzącego układ siatki

Dla zaawansowanych

gdy rozmiar szerokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru szerokości kolumn budujących siatkę, wtedy aby obliczyć ostateczny rozmiar szerokości danej kolumny przeglądarka internetowa pierw korzysta z wartości auto, a następnie z podanej przez nas wartości procentowej

sytuacje, gdy rozmiar szerokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru szerokości kolumn budujących siatkę:

  • gdy element HTML tworzący układ siatki jest typu inline-grid oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki jest pływającym elementem HTML oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki posiada pozycję absolute lub pozycję fixed oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
Wartość domyślna

brak

Dodatkowe dostępne wartości składnika size

min-content

Wartość min-content składnika size obliczana jest przez przeglądarkę internetową na podstawie wszystkich elementów HTML, które należą do danej kolumny budującej siatkę elementu HTML tworzącego układ siatki.

Wartość min-content składnika size sprawia, że rozmiar szerokości kolumny budującej siatkę elementu HTML tworzącego układ siatki uzależniony będzie od najszerszej pojedynczej posiadanej treści do wyświetlenia przez daną kolumnę.

Wspomnianą treścią może być element HTML posiadający ustalony stały rozmiar szerokości obszaru zawartości lub treść posiadana przez element HTML nieposiadający ustalonego stałego rozmiaru szerokości obszaru zawartości.

grid-template-columns:min-content;

wartość min-content jako rozmiar szerokości kolumny siatki

max-content

Wartość max-content składnika size obliczana jest przez przeglądarkę internetową na podstawie wszystkich elementów HTML, które należą do danej kolumny budującej siatkę elementu HTML tworzącego układ siatki.

Wartość max-content składnika size sprawia, że rozmiar szerokości kolumny budującej siatkę elementu HTML tworzącego układ siatki uzależniony będzie od możliwie najszerszej posiadanej treści do wyświetlenia przez daną kolumnę.

Wspomnianą treścią może być element HTML posiadający ustalony stały rozmiar szerokości obszaru zawartości lub treść posiadana przez element HTML nieposiadający ustalonego stałego rozmiaru szerokości obszaru zawartości.

grid-template-columns:max-content;

wartość max-content jako rozmiar szerokości kolumny siatki

auto

Wartość auto składnika size sprawia, że rozmiar szerokości kolumny budującej siatkę elementu HTML tworzącego układ siatki uzależniony jest od ilości posiadanej treści do wyświetlenia przez daną kolumnę, ponadto gdy jest to możliwe treść ta nie powinna powodować przepełnienia.

Gdy wartość "auto" jest wartością parametru min funkcji minmax(), wtedy wartość "auto" działa na takiej samej zasadzie jak wartość min-content.

Gdy wartość "auto" jest wartością parametru max funkcji minmax(), wtedy wartość "auto" działa na takiej samej zasadzie jak wartość max-content.

Dzięki wartości "auto" występujący na osi liniowej elementu HTML tworzącego układ siatki rozmiar kolumny budującej siatkę dodatkowo może zostać rozciągnięty za pomocą wartości stretch właściwości justify-content.

grid-template-columns:auto;

wartość auto jako rozmiar szerokości kolumny siatki

fr

Za pomocą specjalnej jednostki fr oraz dowolnej nieujemnej liczby możemy określić rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Wartość wyrażona za pomocą jednostki fr obliczana jest przez przeglądarkę internetową proporcjonalnie na podstawie rozmiaru wolnej przestrzeni, jaki pozostał wzdłuż osi liniowej w obszarze zawartości elementu HTML tworzącego układ siatki. Aby ustalić potrzebną proporcję przeglądarka internetowa bierze pod uwagę tylko te kolumny budujące siatkę, które posiadają rozmiar szerokości wyrażony za pomocą jednostki fr.

grid-template-columns:1fr 2fr 3fr;

wartość wyrażona za pomocą jednostki fr jako rozmiar szerokości kolumny siatki

W ten sposób obliczony przez przeglądarkę internetową rozmiar szerokości jest tylko sugerowanym minimalnym rozmiarem szerokości, co oznacza, że rozmiar ten może zostać dodatkowo pomniejszony lub powiększony, gdy jest to konieczne (np. w sytuacji gdy jedna z kolumn posiada treść niemieszczącą się w ten sposób obliczonym rozmiarze szerokości, wtedy rozmiar szerokości danej kolumny może zostać powiększony, natomiast rozmiar szerokości pozostałych kolumn może zostać równomiernie pomniejszony).

Wartość wyrażona za pomocą jednostki "fr" nie może wystąpić w funkcji calc().

Dla zaawansowanych

jeżeli rozmiar wolnej przestrzeni, jaki pozostał wzdłuż osi liniowej w obszarze zawartości elementu HTML tworzącego układ siatki jest nieokreślony, wtedy przeglądarka internetowa ustala ile wynosi wartość hipotetycznego 1fr, dzięki czemu przeglądarka internetowa może obliczyć rozmiar szerokości wszystkich docelowych kolumn budujących siatkę. Aby odnaleźć wartość hipotetycznego 1fr przeglądarka internetowa pierw ustala, na podstawie wartości max-content, rozmiar szerokości wszystkich kolumn posiadających wartość wyrażoną za pomocą jednostki fr, a następnie w ten sposób ustalony rozmiar szerokości każdej kolumny dzieli przez ilość fr posiadaną przez daną kolumnę w celu odnalezienia największej wartości, która staje się wartością hipotetycznego 1fr.

sytuacje, gdy rozmiar wolnej przestrzeni, jaka pozostała wzdłuż osi liniowej w obszarze zawartości elementu HTML tworzącego układ siatki jest nieokreślony:

  • gdy element HTML tworzący układ siatki jest typu inline-grid oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki jest pływającym elementem HTML oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki posiada pozycję absolute lub pozycję fixed oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
minmax()

Za pomocą specjalnej funkcji minmax() możemy określić przedział wartości, jaki może posiadać rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji minmax()

min

Parametr min jest wymaganym parametrem funkcji minmax(). Parametr min określa wartość minimalną przedziału wartości.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty, jak również wartość min-content, max-content lub wartość auto

Wartość domyślna

brak

max

Parametr max jest wymaganym parametrem funkcji minmax(). Parametr max określa wartość maksymalną przedziału wartości.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub jednostką fr lub procenty, jak również wartość min-content, max-content lub wartość auto

Informacje dodatkowe

jeżeli podana przez nas wartość parametru max okaże się mniejsza od podanej przez nas wartości parametru min, wtedy wartość parametru max jest ignorowana

Wartość domyślna

brak

fit-content()

Za pomocą specjalnej funkcji fit-content() możemy określić ewentualny rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji fit-content()

limit

Parametr limit jest wymaganym parametrem funkcji fit-content(). Parametr limit określa ewentualny rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Ważne

podana przez nas wartość parametru limit stanie się rozmiarem szerokości kolumny tylko w sytuacji, gdy podana przez nas wartość parametru limit będzie mieściła się w zakresie wartości od min-content do max-content, w przeciwnym wypadku rozmiar szerokości kolumny zostanie ustalony przez przeglądarkę internetową na podstawie wartości minmax(min-content, max-content)

Wartość domyślna

brak

repeat()

Za pomocą specjalnej funkcji repeat() możemy określić rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki. Dodatkowo możemy określić nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji repeat()

number

Parametr number jest wymaganym parametrem funkcji repeat(). Parametr number określa ilość powtórzeń parametru pattern w celu uzyskania ostatecznej wartości.

Dostępne wartości

dowolna dodatnia liczba całkowita

Wartość domyślna

brak

pattern

Parametr pattern jest wymaganym parametrem funkcji repeat(). Parametr pattern określa wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru number.

Dostępne wartości

pierwszy wzorzec wartości

Informacje dodatkowe

w podanym przez nas wzorcu nie może wystąpić funkcja repeat()

gdy w podanym przez nas zapisie wartość parametru number jest większa od wartości 1 oraz gdy pierwszą oraz ostatnią wartością wzorca jest wartość określająca nazwę linii kolumnowej, wtedy obie wspomniane nazwy będą dotyczyły jednej i tej samej kolejnej linii kolumnowej (przykładowo zapis repeat(2, [c1] 100px [c2]) będzie równoznaczny z wartością [c1] 100px [c2 c1] 100px [c2])

Wartość domyślna

brak

grid-template-columns:[c1] 80px [c2] 80px [c3] 80px [c4] 80px [c5] 80px [c6] 80px [c7];

schemat tworzenia nazw linii kolumnowych oraz rozmiaru szerokości poszczególnych kolumn budujących siatkę

Przykład

  grid-template-columns:[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
div-1
div-2
div-3
div-4
div-5

Nazwami poszczególnych linii kolumnowych budujących siatkę przykładowego elementu "div#gridbox" są kolejno nazwy: "c1", "c2", "c3", "c4", "c5", "c6", "c7", ponadto rozmiar szerokości poszczególnych kolumn budujących siatkę przykładowego elementu "div#gridbox" kolejno wynosi: 60 pikseli, 70 pikseli, 65 pikseli, 75 pikseli, 70 pikseli, 80 pikseli, ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "grid-template-columns" wraz z następującymi wartościami: "[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7]".

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:[r1] 40px [r2] 60px [r3] 45px [r4] 65px [r5] 50px [r6] 70px [r7];
        grid-template-columns:[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
        background-color:#7DCDE8;
      }

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

      #gridbox > :nth-child(1) {
        grid-row-start:r1;
        grid-row-end:r3;
        grid-column-start:c1;
        grid-column-end:c5;
        background-color:red;
      }

      #gridbox > :nth-child(2) {
        grid-row-start:r1;
        grid-row-end:r5;
        grid-column-start:c5;
        grid-column-end:c7;
        background-color:orange;
      }

      #gridbox > :nth-child(3) {
        grid-row-start:r5;
        grid-row-end:r7;
        grid-column-start:c3;
        grid-column-end:c7;
        background-color:yellow;
      }

      #gridbox > :nth-child(4) {
        grid-row-start:r3;
        grid-row-end:r7;
        grid-column-start:c1;
        grid-column-end:c3;
        background-color:pink;
      }

      #gridbox > :nth-child(5) {
        grid-row-start:r3;
        grid-row-end:r5;
        grid-column-start:c3;
        grid-column-end:c5;
        background-color:gold;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

drugi wzorzec wartości

Wyjaśnienie

Za pomocą właściwości grid-template-columns oraz jednego z góry zdefiniowanych wzorców wartości możemy określić nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki, jak również możemy określić rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Składniki drugiego wzorca wartości właściwości grid-template-columns

Ważne

możemy podać więcej par składników name size, dzięki czemu kolejne linie kolumnowe budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać swoją nazwę, a kolejne kolumny budujące siatkę elementu HTML tworzącego układ siatki mogą posiadać określony rozmiar szerokości

Informacje dodatkowe

domyślnie każda linia kolumnowa budująca siatkę elementu HTML tworzącego układ siatki posiada swój własny numer (pierwsza linia kolumnowa posiada numer 1, druga linia kolumnowa posiada numer 2 itd.)

jedną z osi, jaką posiada każdy element HTML, jest oś liniowa. Oś liniowa ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML.

linie kolumnowe budujące siatkę elementu HTML tworzącego układ siatki układają się w obszarze zawartości tego elementu HTML (jedna po drugiej w szeregu od początkowej krawędzi liniowej do końcowej krawędzi liniowej)

do między innymi numeru linii kolumnowej siatki lub nazwy linii kolumnowej siatki możemy odwołać się w konkretnym celu za pomocą następujących właściwości CSS: grid-column-start, grid-column-end, grid-column, grid-area

Przykładowe zapisy

50px repeat(auto-fill, 100px)

10% repeat(auto-fit, 20%) 10%

[c1] 150px [c2] 200px [c3] repeat(auto-fill, [y] 50px)

repeat(auto-fit, [y] 50px) [y]

repeat(4, 50px) repeat(auto-fill, 100px) repeat(2, 75px)

minmax(50px, max-content) repeat(auto-fit, 50px)

repeat(auto-fit, 50px) minmax(min-content, 150px)

[c1] 50px [c2] repeat(auto-fit, 50px) minmax(min-content, 150px)

repeat(auto-fill, [c] minmax(100px, 1fr) [y] 50px) [c] 50px [y]

name

Składnik name nie jest wymaganym składnikiem wzorca wartości właściwości grid-template-columns. Składnik name określa nazwę linii kolumnowej budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartość własna (dodatkowo z wyłączeniem wartości span)

Sposób podawania

wybraną nazwę należy podać pomiędzy nawiasem kwadratowym [], ponadto jeżeli z jakiegoś powodu chcemy, aby dana linia kolumnowa budująca siatkę elementu HTML tworzącego układ siatki posiadała więcej niż jedną nazwę, wtedy do danego nawiasu kwadratowego należy dodać kolejną nazwę (wszystkie nazwy należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji))

Wartość domyślna

brak

size

Składnik size nie jest zawsze wymaganym składnikiem wzorca wartości właściwości grid-template-columns. Składnik size określa rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

gdy w naszym zapisie chcemy określić wartość składnika name, wtedy w naszym zapisie musimy również określić wartość składnika size

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości elementu HTML tworzącego układ siatki

Dla zaawansowanych

gdy rozmiar szerokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru szerokości kolumn budujących siatkę, wtedy aby obliczyć ostateczny rozmiar szerokości danej kolumny przeglądarka internetowa pierw korzysta z wartości auto, a następnie z podanej przez nas wartości procentowej

sytuacje, gdy rozmiar szerokości obszaru zawartości elementu HTML tworzącego układ siatki uzależniony jest wyłącznie od rozmiaru szerokości kolumn budujących siatkę:

  • gdy element HTML tworzący układ siatki jest typu inline-grid oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki jest pływającym elementem HTML oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
  • gdy element HTML tworzący układ siatki posiada pozycję absolute lub pozycję fixed oraz nie posiada w żaden sposób ustalonego stałego rozmiaru szerokości obszaru zawartości
Wartość domyślna

brak

Dodatkowe dostępne wartości składnika size

minmax()

Za pomocą specjalnej funkcji minmax() możemy określić przedział wartości, jaki może posiadać rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji minmax()

min

Parametr min jest wymaganym parametrem funkcji minmax(). Parametr min określa wartość minimalną przedziału wartości.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty (jak również wartość min-content, max-content lub wartość auto, jednak tylko wtedy, gdy wartością składnika max jest dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty)

Wartość domyślna

brak

max

Parametr max jest wymaganym parametrem funkcji minmax(). Parametr max określa wartość maksymalną przedziału wartości.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty (jak również dowolna nieujemna liczba wraz z jednostką fr lub wartość min-content, max-content lub wartość auto, jednak tylko wtedy, gdy wartością składnika min jest dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty)

Informacje dodatkowe

jeżeli podana przez nas wartość parametru max okaże się mniejsza od podanej przez nas wartości parametru min, wtedy wartość parametru max jest ignorowana

Wartość domyślna

brak

repeat()

Za pomocą specjalnej funkcji repeat() możemy określić rozmiar szerokości poszczególnych kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki. Dodatkowo możemy określić nazwy poszczególnych linii kolumnowych budujących siatkę interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji repeat()

number

Parametr number jest wymaganym parametrem funkcji repeat(). Parametr number określa ilość powtórzeń parametru pattern w celu uzyskania ostatecznej wartości.

Dostępne wartości

dowolna dodatnia liczba całkowita

Wartość domyślna

brak

pattern

Parametr pattern jest wymaganym parametrem funkcji repeat(). Parametr pattern określa wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru number.

Dostępne wartości

drugi wzorzec wartości (lecz w tym wypadku wyłącznie zapis name size name)

Informacje dodatkowe

w podanym przez nas wzorcu nie może wystąpić funkcja repeat()

gdy w podanym przez nas zapisie wartość parametru number jest większa od wartości 1 oraz gdy pierwszą oraz ostatnią wartością wzorca jest wartość określająca nazwę linii kolumnowej, wtedy obie wspomniane nazwy będą dotyczyły jednej i tej samej kolejnej linii kolumnowej (przykładowo zapis repeat(2, [c1] 100px [c2]) będzie równoznaczny z wartością [c1] 100px [c2 c1] 100px [c2])

Wartość domyślna

brak

auto-repeat

Składnik auto-repeat jest wymaganym składnikiem wzorca wartości właściwości grid-template-columns. Składnik auto-repeat określa automatyczny sposób wypełnienia kolumnami rozmiaru szerokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Wartość domyślna

brak

Dostępne wartości składnika auto-repeat

repeat()

Za pomocą specjalnej funkcji repeat() możemy określić kilka cech automatycznego sposobu wypełnienia kolumnami rozmiaru szerokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Parametry funkcji repeat()

auto-mode

Parametr auto-mode jest wymaganym parametrem funkcji repeat(). Parametr auto-mode określa tryb automatycznego sposobu wypełnienia kolumnami rozmiaru szerokości wolnej przestrzeni obszaru zawartości interesującego nas elementu HTML tworzącego układ siatki.

Dostępne wartości

wartość auto-fill lub wartość auto-fit

Informacje dodatkowe

wartość auto-fill sprawia, że rozmiar szerokości wolnej przestrzeni obszaru zawartości elementu HTML tworzącego układ siatki zostanie wypełniony kolumnami (utworzonymi na podstawie wartości parametru pattern) taką ilość razy, aby nie spowodować przepełnienia elementu HTML tworzącego dany układ siatki

wartość auto-fit sprawia, że rozmiar szerokości wolnej przestrzeni obszaru zawartości elementu HTML tworzącego układ siatki zostanie wypełniony kolumnami (utworzonymi na podstawie wartości parametru pattern) taką ilość razy, aby nie spowodować przepełnienia elementu HTML tworzącego dany układ siatki, dodatkowo rozmiar szerokości w ten sposób utworzonych kolumn, do których nie został przypisany żaden element HTML, zostanie zmniejszony do zera

Wartość domyślna

1

pattern

Parametr pattern jest wymaganym parametrem funkcji repeat(). Parametr pattern określa wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru auto-mode.

Dostępne wartości

drugi wzorzec wartości (lecz w tym wypadku wyłącznie zapis name size name)

Informacje dodatkowe

w podanym przez nas wzorcu nie może wystąpić funkcja repeat()

Wartość domyślna

brak

Przykład

  grid-template-columns:repeat(auto-fill, 70px);
div-1
div-2
div-3
div-4
div-5

Kolumnami budującymi siatkę przykładowego elementu "div#gridbox" są kolumny o rozmiarze szerokości równym 70 pikseli, wspomniane kolumny wypełniają rozmiar szerokości wolnej przestrzeni obszaru zawartości przykładowego elementu "div#gridbox", ponadto poszczególne linie kolumnowe budujące siatkę przykładowego elementu "div#gridbox" nie posiadają swoich nazw, ponieważ do wspomnianego elementu "div" została dodana właściwość "grid-template-columns" wraz z wartością w postaci funkcji "repeat()", w której to funkcji zostały użyte następujące wartości: "auto-fill, 70px".

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(auto-fill, 60px);
        grid-template-columns:repeat(auto-fill, 70px);
        width:460px;
        height:400px;
        background-color:#7DCDE8;
      }

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

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

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

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

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

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

  <body>

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

  </body>
</html>