Properti Singkatan untuk Perataan di Dalam Sel pada Kedua Sumbu di CSS Grid

Dengan properti singkatan place-items kita dapat secara bersamaan meratakan elemen di dalam sel grid pada kedua sumbu. Properti ini menerima dua nilai, yang dipisahkan oleh spasi. Nilai pertama kita gunakan untuk mengatur posisi elemen pada sumbu vertikal, dan nilai kedua - pada sumbu horizontal. Properti ini ditetapkan pada elemen induk.

Mari kita lihat cara kerja properti ini dengan contoh.

Tengah Vertikal dan Awal Horizontal

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Mari kita lihat grid kita di inspector:

Akhir Vertikal dan Tengah Horizontal

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Mari kita lihat grid kita di inspector:

Awal Vertikal dan Akhir Horizontal

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Mari kita lihat grid kita di inspector:

Tugas Praktis

Buatlah grid yang terdiri dari enam elemen dan tempatkan mereka dalam dua kolom. Lakukan perataan elemen pada awal sumbu horizontal dan tengah sumbu vertikal grid.

Sekarang tempatkan elemen grid menjadi tiga kolom dan atur perataan elemen pada tengah sumbu horizontal dan tengah sumbu vertikal grid.

Ubah tugas sebelumnya sehingga perataan elemen terjadi pada akhir sumbu horizontal dan awal sumbu vertikal grid.