Grid mulki nima?

Panjara xususiyati bu panjara-shablon-qatorlar, panjara-shablon-ustunlar, panjara-shablon-maydonlar, panjara-avtomatik-qatorlar, panjara-avtomatik-ustunlar, panjara-avtomatik oqimlar, panjara-ustun-bo'shliqlar uchun qisqartma xususiyatdir. va panjara qatorlari orasidagi farq.

Panjara tuzilishi

Grid xossasi elementlarni ri matritsasi kabi ko'rinishga keltiradi

 
 
 
 
 
 
 
 

Css-da

#idish {
 displey: panjara;
 }

misolda # konteyner panjara shaklida ko'rsatiladi va uning bolalar elementi panjara kataklari yoki elementlar ko'rinishida namoyish etiladi

Brauzer mosligi

IE, Edge, Firefox CSS-ning panjara xususiyatlarini qo'llab-quvvatlaganligi juda katta hayajon. Asosan barcha brauzerlarda dasturiy vositalarda chiroyli ko'rinadigan panjara ko'rinishi mavjud.

Tarmoq chiziqlari

Izgaralar gorizontal va vertikal chiziqlar bo'lib, ular joylashishni aniqlash uchun ishlatiladi. Joylashuv indeksi indeks (manfiy ham, musbat butun ham) bo'lishi mumkin.

Xususiyatlar → grid-ustun-boshlash, panjara-ustun-oxir, panjara-qator-oxir, panjara-qator-oxir.

Namuna kodi:

#grid> div: nth-bola (2) {
 panjara-ustun-boshlash: 2;
 panjara-ustunning oxiri: 3;
 grid-qator-start: 2;
 panjara-qatorning oxiri: 3;
}

Element 2 ikkinchi vertikal chiziqdan 2 gorizontal chiziqdan boshlanadi va element 3 vertikal chiziqda va 3 vertikal chiziqda tugaydi.

Panjara chizig'i

Izgara xujayrasi

Panjara uyasi - bu ikkita ulashgan vertikal panjara chizig'i va ikkita ulashgan gorizontal panjara chiziqlari orasidagi bo'shliqdir.

Izgara xujayrasi

Izgaralar

Panjara izi - ikkita ulashgan panjara chiziqlari orasidagi bo'shliq. ya'ni qatorlar, ustunlar.

Grid-trek

Grid maydoni va tarmoqdagi kamchilik

Panjara maydoni bu bir yoki bir nechta hujayralar guruhidir.

Grid Gap - bu satrlar va ustunlar orasidagi bo'shliq. Uning panjara-qator-bo'shlik va panjara-ustun-bo'shliqning stenogrammasi.

Qator qatori va panjara ustuni

panjara-qator - bu grid-qator-start va grid-qator-oxir uchun stenografiya xususiyati.

panjara-ustun - bu grid-ustun-boshlash va grid-ustun-oxir uchun stenografiya xususiyati

Qator qatori

grid-row-start → qatorda panjara elementining boshlang'ich pozitsiyasini bildiradi

eg.grid-row-start: 2 → Element ikkinchi vertikal chiziqdan boshlanadi

grid-row-end → qatorda panjara elementining tugash holatini bildiradi

eg.grid-satr oxiri: 3 → Element ikkinchi vertikal chiziqda tugaydi

Grid-avtomatik oqim

Avtomatik joylashtirish algoritmi qanday ishlashini boshqaradi. Odatiy bo'lib, qiymat satr (elementlar qator asosida joylashtirilgan)

grid-avtomatik-oqim: qator;
panjara-avtomatik oqim: ustun;
Avtomatik oqim ustuni & panjara avtomatik oqim qatori

grid-auto-flow: qator zich → "zich" o'rash algoritmidan foydalanadi. To'rdagi bo'sh joyni qator asosida to'ldiring.

panjara-avtomatik oqim: ustun zichligi → "zich" o'rash algoritmidan foydalanadi. Ustun asosida panjara bo'sh joyini to'ldiring

Aniq tarmoq va yashirin tarmoq

Aniq panjara - bu panjara-shablon-qator, panjara-shablon-ustunlar yordamida foydalanuvchi tomonidan yaratilgan panjara

panjara-shablon-ustunlar: takrorlash (3, 100px);
panjara-shablon-qatorlar: 100px 100px;

Yashirin panjara brauzer tomonidan yaratilgan. Yashirin panjara hajmini grid-auto-ustunlar va grid-avtomatik-satrlar xususiyati yordamida o'zgartirish mumkin.

panjara-shablon-ustunlar: takrorlash (3, 100px);
panjara-avtomatik qatorlar: 100px;

Grid buyurtmasi:

Biz elementni shablon maydoni maydoni bo'yicha buyurtma berishimiz mumkin.

media so'rovida shablon maydonini o'zgartirishimiz va yangi panjara tuzilishini namoyish etishimiz mumkin.

ko'proq ma'lumot olish uchun kodepeni tekshiring.

Panjara uchun, asosan, barchamiz yuklash chizig'i panjara tizimidan foydalanamiz. Bootstrap har bir versiyada ba'zi bir sinf nomini o'zgartirishi mumkin (Ammo Burch kabi emas ), shuning uchun qaysi versiyada class nomiga ega bo'lish kerakligini eslab qolishimiz kerak.

CSS panjara xususiyatidan foydalanib, biz elementlarni panjara ko'rinishida osongina aks ettira olamiz (hatto IE da).

O'qiganingiz uchun katta rahmat! Agar sizga yoqqan bo'lsa, iltimos cl qarsak chalib, postni baham ko'ring. Quyida sharh qoldirishingiz mumkin .