CSS Grid Үүсгэгч

Багана болон мөрнүүдээ тохируулж, нүднүүд дээгүүр чирж элементүүдээ байршуулан, сүлжээний CSS болон тохирох HTML-ийг ганц товшилтоор хуулж аваарай.

Бэлэн загварууд
Элементүүд
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 нь сүлжээг тодорхойлж, элемент бүрийг байршуулна. Хоёуланг нь төсөлдөө буулгаснаар энд зурсантай яг ижил бүтцийг авах болно.

BroBroGo редакцийн баг бичиж, хянасан.Сүүлд шинэчилсэн:

CSS Grid Үүсгэгч ашиглан сүлжээний бүтэц зохион бүтээх нь

CSS Grid Үүсгэгч нь багана болон мөрний тоог тохируулах, тэдгээрийн хэмжээг заах, мөн хоорондын зайг тодорхойлох замаар CSS grid бүтцийг нүдээр харж зохион бүтээх боломжийг олгодог хэрэгсэл юм. Хэрэглэгч сүлжээний нүднүүд дээгүүр чирж элементүүдийг байршуулах бөгөөд систем нь түүнд тохирох CSS болон HTML кодыг автоматаар үүсгэдэг. Энэхүү хэрэгсэл нь CSS grid бүтцийг гараар бичихгүйгээр код үүсгэх, багана болон мөрний хэмжээ сүлжээний бүтцэд хэрхэн нөлөөлж байгааг харах, эсвэл Хажуугийн мөр, Толгой ба хөл, Цомог, Хянах самбар зэрэг бэлэн загваруудыг ашиглан бүтэц үүсгэхэд зориулагдсан.

Таны үүсгэсэн сүлжээний бүтэц нь шууд таны хөтөч дээр хийгддэг. Таны тохируулсан юуг ч BroBroGo руу хуулж илгээхгүй бөгөөд бүх боловсруулалт хэрэглэгчийн төхөөрөмж дээр явагдана.

Оролтын утгууд ба хязгаарлалт

Сүлжээг үүсгэхийн тулд дараах параметрүүдийг тохируулах шаардлагатай:

  • Баганууд: 1-ээс 12 хүртэлх тоо.
  • Мөрнүүд: 1-ээс 12 хүртэлх тоо.
  • Баганын зай: 0-ээс 48px хүртэлх тоо.
  • Мөрний зай: 0-ээс 48px хүртэлх тоо.
  • Баганын хэмжээ: 1fr, 200px, auto, min-content, эсвэл minmax(120px, 1fr) зэрэг CSS grid-ийн ямар ч хүчинтэй утга.
  • Мөрний хэмжээ: Дээрхтэй адил CSS grid-ийн ямар ч хүчинтэй утга.
  • Элемент байршуулах: Сүлжээний нүднүүд дээгүүр чирж тэгш өнцөгт талбайг тэмдэглэх.

Хэрэгсэл нь хамгийн ихдээ 16 элемент байршуулахыг дэмждэг. Хэрэв багана эсвэл мөрний хэмжээний нүдэнд not-a-grid-track гэх мэт буруу утга оруулбал тухайн талбар хүчингүйд тооцогдох боловч гаралтын CSS код нь хамгийн сүүлийн зөв утгыг хадгалж үлдэнэ.

Сүлжээний элементүүдийг байршуулах дүрэм

Сүлжээний нүднүүд дээгүүр хулганаар дарж чирээд тавихад сонгосон багана болон мөрүүдийг хамарсан дэд элемент үүснэ. Зурсан элемент бүр нь CSS код дотор өөрийн гэсэн grid-column болон grid-row дүрэмтэй болох бөгөөд HTML код дотор тохирох div элементийг үүсгэдэг.

Элементүүд нь хоорондоо давхцаж болох бөгөөд сүүлд зурсан элемент нь өмнөх элементүүдийнхээ дээр байрлана. Элементийг устгахын тулд түүний буланд байрлах "×" тэмдэг дээр дарах хэрэгтэй. "Элементүүдийг цэвэрлэх" үйлдлийг сонговол HTML контейнер хоосон болж, элементийн тоо 0 болж өөрчлөгдөнө. Харин "Элемент нэмэх" үйлдлийг сонговол шинэ HTML элемент үүснэ.

Гаралтын код ба оновчлол

Хэрэгсэл нь сүлжээний контейнер болон байршуулсан элемент бүрт зориулсан CSS болон HTML кодыг үүсгэдэг. Кодыг оновчтой болгохын тулд дараах дүрмүүдийг ашигладаг:

  1. Ижил хэмжээг нэгтгэх: Хэрэв сүлжээний багана эсвэл мөрнүүд ижил хэмжээтэй байвал гаралтын CSS кодонд тэдгээрийг repeat() функц ашиглан хураангуйлдаг.
  2. Зайг нэгтгэх: Баганын зай болон мөрний зайг тусад нь тохируулах боломжтой боловч тэдгээрийн хэмжээ ижил байвал CSS кодонд ганц gap шинж чанар болгон нэгтгэж харуулдаг.

Бэлэн загварууд

Хурдан ажиллахын тулд дараах бэлэн загваруудыг шууд сонгон ашиглаж болно:

  • Хажуугийн мөр
  • Толгой ба хөл
  • Цомог: Энэхүү загвар нь 3 багана, 2 мөр, 3 элемент бүхий бүтцийг автоматаар үүсгэдэг.
  • Хянах самбар

Түгээмэл асуултууд

Сүлжээ (grid) дээр элементүүдийг хэрхэн байршуулах вэ?

Нүднүүд дээгүүр дарж чирэн тэгш өнцөгт үүсгэнэ үү — хуруугаа авахад энэ нь тухайн багана болон мөрүүдийг хамарсан байршуулсан дэд элемент болно. Таны зурсан элемент бүр CSS-д өөрийн гэсэн grid-column болон grid-row дүрэмтэй болох бөгөөд HTML-д тохирох div-ийг үүсгэнэ. Элементүүд давхцаж болох бөгөөд сүүлд зурсан нь дээр нь байрлана; устгахын тулд элемент дээрх × тэмдгийг ашиглана уу.

Багана болон мөрнүүд өөр өөр хэмжээтэй байж болох уу?

Тийэ ээ. Зам бүр өөрийн гэсэн хэмжээний хайрцагтай бөгөөд та тэнд ямар ч сүлжээний утгыг бичиж болно — 1fr, 200px, auto, min-content эсвэл minmax(120px, 1fr). Ижил хэмжээтэй замуудыг repeat() функцэд нэгтгэдэг тул гаралтын код богино байна. Баганын зай болон мөрний зайг тусад нь тохируулах бөгөөд тэдгээр нь таарвал нэг зай (gap) болж хураагдана.

Үүсгэсэн кодыг би яах ёстой вэ?

CSS болон HTML-ийг зэрэгцүүлэн хуулж аваарай. HTML нь элемент бүрт нэг div бүхий контейнерыг өгөх бөгөөд CSS нь сүлжээг тодорхойлж, элемент бүрийг байршуулна. Хоёуланг нь төсөлдөө буулгаснаар энд зурсантай яг ижил бүтцийг авах болно.

Миний оруулсан өгөгдөл сервер рүү илгээгдэх үү?

Үгүй. Таны сүлжээг таны хөтөч дээр шууд үүсгэдэг. Таны тохируулсан юуг ч BroBroGo руу хуулж илгээхгүй бөгөөд бүх үйлдэл дотооддоо хийгдэнэ.

CSS Cubic Bezier ҮүсгэгчХурдны муруйг үүсгэхийн тулд хоёр бариулыг чирж, цэг хэрхэн хөдөлж байгааг тогтмол хөдөлгөөнтэй харьцуулан харж, cubic-bezier() утгыг хуулж аваарай.Flexbox ҮүсгэгчFlex контейнер болон түүний элементүүдийг харагдах удирдлагаар тохируулж, бүтцийн өөрчлөлтийг шууд харан, CSS-ийг ганц товшилтоор хуулж аваарай.Хайрцагны сүүдэр үүсгэгч (Box Shadow Generator)Гулсууруудыг чирж хайрцагны сүүдэр үүсгэн, гүн харагдуулахын тулд давхаргууд нэмж, бэлэн болсон CSS-ийг шууд хуулж аваарай.Градиент үүсгэгчШугаман, радиал эсвэл конус градиент үүсгэж, өнгөний цэгүүд нэмж, чиглэлийг тохируулан, CSS-ийг ганц товшилтоор хуулж аваарай.Хүрээний радиус үүсгэгчӨнцөг бүрийг гулсуураар дугуйлж, эллипс горимоор органик дусал хэлбэр үүсгэн, CSS-ийг шууд хуулж аваарай.CSS clamp() Тооны машинЖижиг болон том дэлгэцийн хэмжээг оруулж, тэдгээрийн хооронд жигд өөрчлөгдөх уян хатан clamp() утгыг аваарай — үсгийн хэмжээ, padding, margin эсвэл gap-д зориулагдсан.