Pengantar CSS Grid
CSS grid merupakan cara untuk menata elemen secara bersamaan baik secara horizontal maupun vertikal. Ini adalah cara yang lebih maju dibandingkan dengan flexbox, tetapi lebih sulit untuk dikuasai.
Untuk membuat grid, Anda perlu mengatur
properti display
pada elemen dengan nilai grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Setelah itu, elemen akan berubah menjadi jaringan dua dimensi, di mana elemen-elemen disusun secara vertikal (kolom) dan horizontal (baris). Area pada persimpangan kolom dan baris disebut sel.
Dengan properti khusus, kita dapat menempatkan elemen berdasarkan baris maupun kolom. Hal ini memudahkan pembuatan tata letak seperti berikut:
Dalam pelajaran-pelajaran berikutnya, pertama-tama kita akan mempelajari penempatan elemen berdasarkan kolom, kemudian beralih ke mempelajari baris, dan setelahnya menggabungkan semuanya.
