Sifat grid

Sifat grid merupakan bentuk penulisan ringkas untuk semua sifat lajur dan baris kontena grid. Semua nilai ditulis dalam satu baris melalui slash.

Melalui grid dalam satu baris hanya boleh digambarkan satu jenis sifat sahaja - eksplisit (grid-template-rows, grid-template-columns, grid-template-areas) atau implisit (grid-auto-rows, grid-auto-columns, grid-auto-flow). Sifat-sifat yang tidak dinyatakan, mengambil nilai lalai.

Sintaks

elemen {
	grid: sifat grid;
}

Contoh

Mari buat jadual dengan menggunakan sifat grid:

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

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

Sekarang mari tetapkan untuk baris kedua dan ketiga lebar yang sama, dan untuk 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: 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 buat baris atas dengan lebar 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: 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-template,
yang menetapkan bilangan dan lebar lajur dan baris untuk elemen
sifat grid-template-rows,
yang menetapkan bilangan dan lebar baris dalam grid
sifat grid-template-columns,
yang menetapkan bilangan dan lebar lajur dalam grid
sifat grid-template-areas,
yang menetapkan penempatan elemen dalam grid
sifat grid-auto-flow,
yang menetapkan penempatan automatik elemen dalam grid