Sintaksis Ringkasan Sifat Grid CSS

Sifat grid mewakili 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 satu jenis sifat boleh digambarkan - sifat 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.

Contoh

Mari buat jadual 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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Contoh

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

Tugas Amali

Laksanakan contoh berikut: