Oszlopok számának és szélességének beállítása CSS grid-ben
A grid használatának megismerését
azzal kezdjük, hogy beállítjuk
azoknak az oszlopoknak a számát és szélességét, amelyek mentén
a gyermekelemek elhelyezkednek.
Ehhez a
grid-template-columns tulajdonságot használjuk, amely
a szülőelemben van megadva, és meghatározza
azoknak az oszlopoknak a számát és szélességét, amelyeket
a gyermekelemek foglalnak el a grid-ben.
A tulajdonság értékében pixelben adjuk meg az oszlopok szélességét.
Példa
Először hozzunk létre egy szülőelemet,
és tegyük grid-tárolóvá.
Tegyük fel, hogy van egy div-ünk, amelyben
négy gyermekelem található. Állítsuk be neki
a display tulajdonságban a grid értéket,
a grid-template-columns tulajdonságban pedig
adjuk meg a két oszlop 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: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Példa
Most hozzunk létre egy táblázatot négy különböző méretű oszlopval:
<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>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Gyakorlati feladatok
Tegyük fel, hogy van egy div-e kilenc gyermekelemmel. Tegye a szülőelemet grid-tárolóvá.
Helyezze el a gyermekelemeket két,
200px széles oszlopban.
Helyezze el a gyermekelemeket három,
150px széles oszlopban.
Helyezze el a gyermekelemeket három
oszlopban: az első 100px széles,
a második 150px, a harmadik pedig
200px széles.