Properti grid

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

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

Sintaks

elemen {
	grid: properti grid;
}

Contoh

Mari buat 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: 400px;
	height: 200px;
}

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

Contoh

Dan sekarang mari atur baris kedua dan ketiga dengan lebar yang sama, dan setiap kolom - dengan lebar yang berbeda:

<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

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

<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

properti grid-template,
yang mengatur jumlah dan lebar kolom serta baris untuk elemen
properti grid-template-rows,
yang mengatur jumlah dan lebar baris dalam grid
properti grid-template-columns,
yang mengatur jumlah dan lebar kolom dalam grid
properti grid-template-areas,
yang mengatur penempatan elemen dalam grid
properti grid-auto-flow,
yang mengatur penempatan elemen otomatis dalam grid