Sifat grid-template

Sifat grid-template menetapkan bilangan dan lebar baris dan lajur, yang akan diduduki oleh elemen dalam grid dan merupakan bentuk ringkas bagi sifat-sifat grid-template-rows dan grid-template-columns. Baris dan lajur, di mana elemen akan ditempatkan dinyatakan melalui garis condong. Sifat grid-template ditetapkan dalam elemen induk dan menentukan susunan elemen-elemen anak. Dalam nilai sifat, kami nyatakan lebar baris atau lajur dalam mana-mana unit untuk saiz.

Apabila menetapkan nilai dalam piksel dalam sifat, saiz elemen akan tepat mengikutinya. Jika kami menetapkan perkataan auto, maka lajur dan baris 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 wadah 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: lebar dan bilangan baris / lebar dan bilangan lajur;
}

Contoh

Mari kita buat jadual menggunakan sifat grid-template:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari kita tetapkan lebar yang sama untuk baris kedua dan ketiga, dan lebar yang berbeza untuk setiap lajur:

<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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang dalam jadual dari contoh sebelumnya, mari kita buat baris atas selebar dua pecahan, dan lajur pertama - setengah 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: 2fr 1fr 1fr / 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,
yang menetapkan tatatan ringkas sifat lajur dan baris
sifat grid-template-rows,
yang menetapkan bilangan dan lebar baris dalam grid
sifat grid-template-columns,
yang menetapkan bilangan dan lebar lajur dalam grid