Sifat grid-template-columns
Sifat grid-template-columns menetapkan
bilangan dan lebar lajur yang
akan diduduki oleh elemen dalam grid.
Sifat dinyatakan dalam elemen induk
dan menentukan lebar lajur elemen-elemen anak.
Dalam nilai sifat, kita nyatakan lebar lajur
dalam sebarang unit
untuk saiz.
Apabila nilai dalam piksel dinyatakan dalam sifat,
saiz lajur akan tepat mengikutnya.
Jika kita menetapkan perkataan auto, maka lajur akan
mengisi semua ruang yang tersedia. Penggunaan
unit fr (pecahan) bermaksud,
bahawa semua ruang akan dibahagikan
kepada bahagian yang sama. Kelebihan
fr adalah kesesuaiannya dengan
bekas atau resolusi skrin yang berbeza,
kerana fr hanya membahagikannya kepada bilangan
pecahan yang dinyatakan tanpa kaitan dengan saiz tepat dalam piksel.
Sintaks
pemilih {
grid-template-columns: lebar lajur;
}
Contoh
Mari kita tetapkan lebar lajur untuk elemen-elemen kita dalam grid:
<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;
}
:
Contoh
Mari kita tetapkan untuk lajur pertama dan ketiga lebar tetap dalam piksel, dan biarkan lajur kedua secara automatik mengisi ruang yang tersedia:
<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;
}
:
Contoh
Sekarang dengan menggunakan sifat
grid-template-columns
mari kita buat supaya lajur pertama dan kedua
menduduki satu bahagian bekas,
dan lajur ketiga - tiga bahagian:
<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;
}
:
Contoh
Nilai yang dinyatakan dalam unit fr
boleh mengambil bentuk pecahan. Mari
ubah contoh sebelumnya, dengan menyatakan
untuk lajur kedua dan ketiga lebar
dalam nombor pecahan:
<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;
}
:
Contoh
Mari dalam sifat grid-template-columns
nyatakan fungsi repeat(),
yang akan memberitahu bekas bahawa semua
tiga lajur harus mempunyai lebar yang sama:
<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;
}
:
Contoh
Sekarang mari ubah contoh sebelumnya supaya kepada tiga lajur yang sama ditambah lajur keempat, yang akan menduduki dua pecahan bekas:
<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;
}
:
Contoh
Mari tetapkan untuk dua lajur pertama lebar satu pecahan bekas, dan untuk dua lajur terakhir - dua pecahan:
<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;
}
:
Contoh
Sekarang mari tetapkan lebar lajur
dengan menggabungkan nilai yang dinyatakan menggunakan
fungsi repeat() dan unit bebas fr:
<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;
}
:
Contoh
Juga dalam fungsi repeat() boleh dinyatakan
nilai auto-fill, yang akan mengisi
bekas kita dengan lajur yang sama dengan lebar yang kita kehendaki:
<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;
}
:
Contoh
Sangat mudah digunakan bersama auto-fill
menyatakan fungsi minmax,
yang menetapkan julat lebar lajur
dari nilai minimum hingga maksimum.
Jika lebar bekas tidak muat semua
lajur, maka sebahagian daripadanya akan berpindah
ke baris baru, dengan lajur dalam baris
diagihkan secara sama rata di dalamnya. Mari ubah
contoh sebelumnya, dengan menyatakan di dalamnya fungsi minmax.
Untuk melihat variasi penempatan lajur yang berbeza
ubah lebar halaman pelayar anda:
<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;
}
:
Contoh
Sekarang mari nyatakan sifat auto-fit,
perbezaannya dari auto-fill adalah,
ia menyesuaikan bilangan lajur mengikut
lebar bekas yang tersedia, dengan mengembangkan atau
mengecutkannya:
<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;
}
:
Contoh
Juga bersama fr boleh
digunakan nilai dalam %, yang juga menentukan
bahagian bekas mana yang akan diduduki oleh lajur.
Dalam kes ini, saiz lajur dalam % akan dikira terlebih dahulu,
dan ruang kosong yang tinggal
akan dibahagikan kepada pecahan:
<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;
}
:
Contoh
Mari gunakan bersama sifat
grid-template-columns dan
grid-template-rows:
<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;
}
:
Contoh
Mari dengan menggunakan sifat
grid-template-columns dan
grid-template-rows
buat jadual daripada sembilan sel, disusun
dalam tiga baris. Dan baris kedua dan ketiga akan mempunyai lebar yang sama,
dan setiap lajur - lebar yang berbeza:
<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;
}
:
Contoh
Sekarang dalam jadual dari contoh sebelumnya buat baris atas selebar dua pecahan, dan lajur pertama - separuh pecahan:
<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;
}
:
Lihat juga
-
sifat
grid-template-rows,
yang menetapkan bilangan dan lebar baris dalam grid -
sifat
grid-auto-columns,
yang menetapkan bilangan dan lebar lajur dalam grid tersirat
