grid-template-columns
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - grid-template-columns property (LV1)
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-columnstyczy się szerokości logicznej
Informacje techniczne o właściwości grid-template-columns
- przeznaczenie
-
-
element HTML typu grid
-
element HTML typu inline-grid
-
- pozycja
-
dowolna
- dziedziczenie
-
nie
- wartość initial
- wyjątki initial
-
brak
- animowanie
-
tak
Interpretacja właściwości grid-template-columns
-
tak
-
tak
-
tak
-
tak
-
nie
-
tak
Zobacz więcej informacji o interpretacji właściwości grid-template-columns.
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;
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
- 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
namenie jest wymaganym składnikiem wzorca wartości właściwościgrid-template-columns. Składniknameokreśla nazwę linii kolumnowej budującej siatkę interesującego nas elementu HTML tworzącego układ siatki. - size
-
Składnik
sizejest wymaganym składnikiem wzorca wartości właściwościgrid-template-columns. Składniksizeokreśla rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.Dodatkowe dostępne wartości składnika
size- min-content
-
Wartość
min-contentskładnikasizeobliczana 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-contentskładnikasizesprawia, ż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; - max-content
-
Wartość
max-contentskładnikasizeobliczana 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-contentskładnikasizesprawia, ż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; - auto
-
Wartość
autoskładnikasizesprawia, ż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; - fr
-
Za pomocą specjalnej jednostki
froraz 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
frobliczana 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ą jednostkifr.grid-template-columns:1fr 2fr 3fr;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().
- 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
minjest wymaganym parametrem funkcjiminmax(). Parametrminokreśla wartość minimalną przedziału wartości. - max
-
Parametr
maxjest wymaganym parametrem funkcjiminmax(). Parametrmaxokreśla wartość maksymalną przedziału wartości.
- 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
limitjest wymaganym parametrem funkcjifit-content(). Parametrlimitokreśla ewentualny rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.
- 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
numberjest wymaganym parametrem funkcjirepeat(). Parametrnumberokreśla ilość powtórzeń parametru pattern w celu uzyskania ostatecznej wartości. - pattern
-
Parametr
patternjest wymaganym parametrem funkcjirepeat(). Parametrpatternokreśla wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru number.
grid-template-columns:[c1] 80px [c2] 80px [c3] 80px [c4] 80px [c5] 80px [c6] 80px [c7];
Przykład
grid-template-columns:[c1] 60px [c2] 70px [c3] 65px [c4] 75px [c5] 70px [c6] 80px [c7];
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
- 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
namenie jest wymaganym składnikiem wzorca wartości właściwościgrid-template-columns. Składniknameokreśla nazwę linii kolumnowej budującej siatkę interesującego nas elementu HTML tworzącego układ siatki. - size
-
Składnik
sizenie jest zawsze wymaganym składnikiem wzorca wartości właściwościgrid-template-columns. Składniksizeokreśla rozmiar szerokości kolumny budującej siatkę interesującego nas elementu HTML tworzącego układ siatki.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
minjest wymaganym parametrem funkcjiminmax(). Parametrminokreśla wartość minimalną przedziału wartości. - max
-
Parametr
maxjest wymaganym parametrem funkcjiminmax(). Parametrmaxokreśla wartość maksymalną przedziału wartości.
- 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
numberjest wymaganym parametrem funkcjirepeat(). Parametrnumberokreśla ilość powtórzeń parametru pattern w celu uzyskania ostatecznej wartości. - pattern
-
Parametr
patternjest wymaganym parametrem funkcjirepeat(). Parametrpatternokreśla wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru number.
- auto-repeat
-
Składnik
auto-repeatjest wymaganym składnikiem wzorca wartości właściwościgrid-template-columns. Składnikauto-repeatokreś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.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-modejest wymaganym parametrem funkcjirepeat(). Parametrauto-modeokreś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. - pattern
-
Parametr
patternjest wymaganym parametrem funkcjirepeat(). Parametrpatternokreśla wzorzec, który powinien zostać powtórzony ilość razy, na którą wskazuje wartość parametru auto-mode.
Przykład
grid-template-columns:repeat(auto-fill, 70px);
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>