A grid-template-columns tulajdonság
A grid-template-columns tulajdonság határozza meg
az oszlopok számát és szélességét, amelyet
egy elem fog elfoglalni a gridben vagy rácsban.
A tulajdonságot a szülőelemben kell megadni,
és meghatározza a gyermekelemek oszlopainak szélességét.
A tulajdonság értékében az oszlopok szélességét
bármilyen mértékegységben
megadhatjuk a méretekhez.
Ha a tulajdonságokban pixelben adjuk meg az értékeket,
akkor az oszlopok méretei pontosan ezeknek felelnek meg.
Ha az auto szót használjuk, akkor az oszlopok
az összes elérhető helyet kitöltik. Az
fr (frakció) egység használata azt jelenti,
hogy az összes helyet azonos
részekre osztják fel. Az
fr előnye, hogy adaptív a
különböző konténerekhez vagy képernyőfelbontásokhoz,
mivel az fr egyszerűen a megadott
számú frakcióra osztja fel őket anélkül, hogy pixelben megadott pontos mérethez kötné.
Szintaxis
szelektor {
grid-template-columns: oszlop szélessége;
}
Példa
Állítsuk be az oszlopok szélességét az elemeink számára a gridben:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Adjunk az első és harmadik oszlopnak rögzített szélességet pixelben, a második oszlop pedig töltse ki automatikusan az elérhető helyet:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most a grid-template-columns
tulajdonsággal tegyük úgy, hogy az első és második
oszlop a konténer egy részét foglalja el,
a harmadik oszlop pedig három részt:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Az fr egységben megadott értékek
tört formájúak is lehetnek. Módosítsuk
az előző példát úgy, hogy a második és harmadik oszlop szélességét
törtszámokban adjuk meg:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
A grid-template-columns
tulajdonságban használjuk a repeat() függvényt,
amely jelzi a konténernek, hogy mindhárom
oszlopnak azonos szélességűnek kell lennie:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most módosítsuk az előző példát úgy, hogy a három azonos oszlophoz hozzáadunk egy negyediket, amely a konténer két frakcióját fogja elfoglalni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Adjunk az első két oszlopnak egy frakció szélességet a konténerből, az utolsó két oszlopnak pedig két frakciót:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most állítsuk be az oszlopok szélességét úgy,
hogy kombináljuk a repeat() függvénnyel
megadott értékeket és a szabad fr egységeket:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
A repeat() függvényben használhatjuk
az auto-fill értéket is, amely kitölti
a konténerünket azonos szélességű oszlopokkal a nekünk megfelelő szélességgel:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Nagyon kényelmes az auto-fill mellett
használni a minmax függvényt,
amely megadja az oszlopok szélességének tartományát
a minimális és maximális érték között.
Ha a konténer szélessége nem fér el az összes
oszlop, akkor néhány közülük új sorba kerül,
miközben a sorban lévő oszlopok
egyenletesen elosztódnak benne. Módosítsuk
az előző példát úgy, hogy abban a minmax függvényt adjuk meg.
Ahhoz, hogy az oszlopok elhelyezkedésének különböző változatait láthassuk,
változtassa a böngészőoldal szélességét:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most használjuk a auto-fit tulajdonságot,
amelynek az auto-fill-től való különbsége abban áll,
hogy az az oszlopok számát igazítja
a konténer elérhető szélességéhez, kibővítve vagy
összehúzva azokat:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Az fr mellett használhatunk
%-ban megadott értékeket is, amelyek szintén meghatározzák,
hogy a konténer mekkora részét fogja az oszlop elfoglalni.
Ekkor először az oszlop méretét számolják ki
%-ban, a maradék szabad helyet pedig
frakciókra osztják:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Használjuk együtt a
grid-template-columns és a
grid-template-rows
tulajdonságokat:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
A
grid-template-columns és a
grid-template-rows
tulajdonságokkal hozzunk létre egy kilenc cellából álló táblázatot, amely
három sorban helyezkedik el. Ráadásul a második és harmadik sor azonos szélességű lesz,
minden oszlop pedig különböző szélességű:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most az előző példa táblázatában tegyük a felső sort két frakció szélességűvé, az első oszlopot pedig fél frakcióvá:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Lásd még
-
a
grid-template-rowstulajdonság,
amely a grid sorainak számát és szélességét határozza meg -
a
grid-auto-columnstulajdonság,
amely az implicit grid oszlopainak számát és szélességét határozza meg
