CSS Gridga kirish
CSS gridlari elementlarni bir vaqtning o'zida gorizontal va vertikal joylashtirish usulidir. Bu flekslarnikiga qaraganda ilg'or usul, lekin o'zlashtirish uchun murakkabroq.
Grid yaratish uchun elementga display
xususiyatini grid qiymatida belgilashingiz kerak:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Shundan so'ng element ikki o'lchovli gridga aylanadi, unda elementlar vertikal (ustunlar) va gorizontal (qatorlar) bo'yicha joylashadi. Ustun va qator kesishgan joydagi maydon katak deb ataladi.
Maxsus xususiyatlar yordamida elementlarni ham qatorlar, ham ustunlar bo'yicha joylashtirish mumkin. Bu quyidagi narsalarni qilishni osonlashtiradi:
Keyingi darslarda biz avval elementlarni ustunlar bo'yicha joylashtirishni o'rganamiz, keyin qatorlarni o'rganishga o'tamiz, va shundan keyin hammasini birlashtiramiz.
