CSS Grid Үүсгэгч
Багана болон мөрнүүдээ тохируулж, нүднүүд дээгүүр чирж элементүүдээ байршуулан, сүлжээний CSS болон тохирох HTML-ийг ганц товшилтоор хуулж аваарай.
Таны сүлжээг таны хөтөч дээр шууд үүсгэдэг. Таны тохируулсан юуг ч BroBroGo руу хуулж илгээхгүй.
Түгээмэл асуултууд
Сүлжээ (grid) дээр элементүүдийг хэрхэн байршуулах вэ?
Нүднүүд дээгүүр дарж чирэн тэгш өнцөгт үүсгэнэ үү — хуруугаа авахад энэ нь тухайн багана болон мөрүүдийг хамарсан байршуулсан дэд элемент болно. Таны зурсан элемент бүр CSS-д өөрийн гэсэн grid-column болон grid-row дүрэмтэй болох бөгөөд HTML-д тохирох div-ийг үүсгэнэ. Элементүүд давхцаж болох бөгөөд сүүлд зурсан нь дээр нь байрлана; устгахын тулд элемент дээрх × тэмдгийг ашиглана уу.
Багана болон мөрнүүд өөр өөр хэмжээтэй байж болох уу?
Тийм ээ. Зам бүр өөрийн гэсэн хэмжээний хайрцагтай бөгөөд та тэнд ямар ч сүлжээний утгыг бичиж болно — 1fr, 200px, auto, min-content эсвэл minmax(120px, 1fr). Ижил хэмжээтэй замуудыг repeat() функцэд нэгтгэдэг тул гаралтын код богино байна. Баганын зай болон мөрний зайг тусад нь тохируулах бөгөөд тэдгээр нь таарвал нэг зай (gap) болж хураагдана.
Үүсгэсэн кодыг би яах ёстой вэ?
CSS болон HTML-ийг зэрэгцүүлэн хуулж аваарай. HTML нь элемент бүрт нэг div бүхий контейнерыг өгөх бөгөөд CSS нь сүлжээг тодорхойлж, элемент бүрийг байршуулна. Хоёуланг нь төсөлдөө буулгаснаар энд зурсантай яг ижил бүтцийг авах болно.