Pengenalan kepada CSS Grid

CSS Grid mewakili satu cara untuk meletakkan elemen serentak secara mendatar dan menegak. Ini adalah cara yang lebih maju berbanding flex, tetapi lebih kompleks untuk dikuasai.

Untuk membuat grid, anda perlu menetapkan sifat display kepada nilai grid:

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

#parent {
	display: grid;
}

Selepas itu, elemen akan bertukar menjadi rangkaian dua dimensi, di mana elemen-elemen disusun secara menegak (lajur) dan mendatar (baris). Kawasan di persilangan lajur dan baris dipanggil sel.

Dengan menggunakan sifat khas, anda boleh meletakkan elemen mengikut baris dan lajur. Ini membolehkan anda mudah membuat, contohnya, perkara seperti ini:

Dalam pelajaran seterusnya, kita pertama akan mempelajari penempatan elemen mengikut lajur, kemudian beralih kepada pembelajaran baris, dan selepas itu menggabungkan semuanya bersama.