Properti Singkatan CSS Grid

Properti grid merupakan bentuk singkat untuk menulis semua properti kolom dan baris grid container. Semua nilai ditulis dalam satu baris dipisahkan oleh garis miring.

Melalui grid, dalam satu baris hanya dapat dijelaskan satu jenis properti - eksplisit (grid-template-rows, grid-template-columns, grid-template-areas) atau implisit (grid-auto-rows, grid-auto-columns, grid-auto-flow). Properti yang tidak ditentukan akan mengambil nilai default.

Contoh

Mari buat sebuah tabel menggunakan properti 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

Dan sekarang mari kita berikan lebar yang sama untuk baris kedua dan ketiga, dan lebar yang berbeda untuk setiap kolom:

<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

Dan sekarang dalam tabel dari contoh sebelumnya mari buat baris atas dengan lebar dua fr, dan kolom pertama - setengah fr:

<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 Praktik

Implementasikan contoh berikut: