CSS Grid generatoru

Necə istifadə etmək olar

1. «Sütunlar» və «Sətirlər» bölmələrində saylarını seçin (ən çoxu 6 sütun və 4 sətir), sonra hər biri üçün ölçü seçin: 1fr, 2fr, auto, 100px, 200px və ya minmax(100px, 1fr).
2. column-gap və row-gap ilə xanalar arasındakı məsafəni, justify-items və align-items ilə xananın öz sahəsində düzülüşünü tənzimləyin.
3. Önizləmədə nömrələnmiş xanaya klikləyin (və ya klaviaturada Tab və Enter) və grid-column: span ilə grid-row: span vasitəsilə onu bir neçə sütuna və ya sətrə yayın.
4. Responsiv şəbəkə lazımdırsa, «Responsiv» qutusunu işarələyin: sütunlar repeat(auto-fill, minmax(…px, 1fr)) ilə yaranır və enə görə özü düzülür. «Kopyala» düyməsi ilə kodu götürün.

Bu necə işləyir

grid-template-columns və grid-template-rows

display: grid verilmiş element şəbəkəyə çevrilir. grid-template-columns sütunların enini, grid-template-rows isə sətirlərin hündürlüyünü təyin edir; hər dəyər bir «trek»dir (xəttlər arasındakı zolaq). Trekləri piksellə, faizlə, auto ilə və ya fr vahidi ilə vermək olar. Generator eyni ölçülü trekləri avtomatik repeat() ilə qısaldır.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr;
}

fr vahidi və repeat()

1fr konteynerdə qalan boş yerin bir payıdır. 1fr 2fr olduqda ikinci sütun birincidən iki dəfə enli olur; sabit ölçülər (200px) və boşluqlar əvvəlcə çıxılır, qalanı fr arasında bölünür. repeat(3, 1fr) isə üç bərabər sütunu qısa yazmaq deməkdir. minmax(100px, 1fr) trekə minimum ölçü verir: sütun 100px-dən dar olmur, yer olduqda genişlənir.

.grid {
  grid-template-columns: repeat(3, 1fr);
}

gap, justify-items və align-items

gap (yəni row-gap və column-gap) trekləri bir-birindən ayırır, kənarlarda isə boşluq yaratmır. justify-items xananın içindəki elementi üfüqi, align-items isə şaquli düzür. Standart dəyər stretch-dir: element bütün xananı doldurur. start, end və center isə elementi öz məzmununun ölçüsünə qədər kiçildir.

.grid {
  gap: 12px 24px; /* row-gap column-gap */
  justify-items: center;
  align-items: start;
}

Bir neçə sütuna və sətrə yayılmaq (span)

grid-column: span 2 elementin iki sütun tutmasını bildirir, grid-row: span 2 isə iki sətir. Qalan elementlər avtomatik yerləşdirmə ilə sonrakı boş xanalara keçir. Yayılan elementlər səbəbindən əvvəlcədən təyin etdiyiniz sətirlər çatmazsa, brauzer əlavə «gizli» sətirlər yaradır; onların hündürlüyünü grid-auto-rows ilə idarə edirlər.

.item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

Mediasorğusuz responsiv şəbəkə

repeat(auto-fill, minmax(140px, 1fr)) sütunların sayını konteynerin enindən asılı olaraq özü seçir: hər sütun ən azı 140px olur və qalan yer onlar arasında bölünür. Beləcə kartlar kiçik ekranda aşağı düşür, @media yazmağa ehtiyac qalmır. auto-fill boş trekləri saxlayır, auto-fit isə onları yığışdırır və mövcud elementləri genişləndirir.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

Tez-tez verilən suallar