CSS Subgrid: Ichki joylashuvlar kuchini ochib berish

CSS Grid veb-sahifalarni joylashtirishda inqilob qildi, misli ko'rilmagan moslashuvchanlik va nazoratni taklif etdi. Biroq, ichki joylashgan gridlarni boshqarish ba'zan qiyinchilik tug'dirishi mumkin. Aynan shu yerda CSS Subgrid yordamga keladi. Subgrid grid elementiga ota-ona gridning trek o'lchamlarini meros qilib olish imkonini beradi, bu esa murakkab joylashuvlarni soddalashtiradi va kodingizni yanada qulayroq qiladi. Ushbu maqola CSS Subgrid-ni tushunish va amalga oshirish bo'yicha keng qamrovli qo'llanmani taqdim etadi, unda barcha darajadagi dasturchilar uchun amaliy misollar va tushunchalar mavjud.

CSS Subgrid nima?

Subgrid - bu CSS Grid-ning bir xususiyati bo'lib, u grid elementining o'zi grid bo'lishiga imkon beradi va ota-ona grid tomonidan belgilangan qator va ustun treklarini meros qilib oladi. Bu siz har bir ichki gridda trek o'lchamlarini aniq belgilamasdan, bir nechta ichki gridlar bo'ylab kontentni tekislashingiz mumkin deganidir. Buni ota-ona grid tuzilmasini o'zining ichki elementlariga kengaytirish usuli deb o'ylang, bu esa yanada yaxlit va izchil joylashuvni yaratadi.

Nima uchun Subgrid-dan foydalanish kerak?

Soddalashtirilgan joylashuvlar: Subgrid ichki gridlarning murakkabligini kamaytiradi, bu sizning CSS kodingizni toza va tushunarliroq qiladi.
Izchil tekislash: Bir nechta ichki darajalar bo'ylab kontentni osongina tekislang, bu esa vizual jozibador va professional dizaynni ta'minlaydi.
Yaxshilangan qo'llab-quvvatlash: Ota-ona griddagi o'zgarishlar avtomatik ravishda subgridlarga tarqaladi, bu esa bir nechta joylarda qo'lda sozlash zaruratini kamaytiradi.
Kengaytirilgan moslashuvchanlik: Subgrid moslashuvchan dizayn tamoyillari bilan uzluksiz ishlaydi, joylashuvlarni turli ekran o'lchamlariga moslashtiradi va joylashuv buzilishlariga yo'l qo'ymaydi.

Brauzerlar bilan mosligi

Amalga oshirishni boshlashdan oldin, brauzerlar bilan mosligini tekshirish muhimdir. 2023-yil oxiriga kelib, Subgrid Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi. Biroq, eng so'nggi qo'llab-quvvatlash holatini tekshirish uchun har doim Can I use-dan foydalanish yaxshi amaliyotdir.

Subgrid-ning asosiy tatbiqi

Subgrid-ning asosiy tushunchalarini ko'rsatish uchun oddiy misoldan boshlaylik.

HTML Tuzilmasi

Birinchidan, gridimiz uchun asosiy HTML tuzilmasini belgilaymiz.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Element 1</div>
    <div class="item-2">Element 2</div>
    <div class="item-3">Element 3</div>
    <div class="item-4">Element 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS Stillari

Endi, ota-ona grid va .content elementi ichida subgrid yaratish uchun CSS-ni belgilaymiz.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* .content subgrid ichidagi elementlarning joylashuvini belgilash */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

Ushbu misolda .content elementi subgrid sifatida belgilanadi. grid-template-columns: subgrid; va grid-template-rows: subgrid; xususiyatlari subgridga ota-ona griddan trek o'lchamlarini meros qilib olishni buyuradi. Kontent maydoni endi asosiy konteyner griddagi belgilangan trek o'lchamlariga mos keladi, subgridning o'zi uchun hech qanday aniq sozlamalarni talab qilmaydi. Bu yon panel va kontent maydoni ichidagi elementlar o'rtasida mukammal tekislanishni ta'minlaydi.

Subgrid-ning ilg'or texnikalari

Treklarni qoplash

Subgrid shuningdek, subgrid ichidagi elementlarga oddiy griddagi kabi bir nechta treklarni qamrab olishga imkon beradi. Bu murakkab joylashuvlarni yaratishda yanada ko'proq moslashuvchanlikni ta'minlaydi.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Ushbu kod .item-1-ni subgridning birinchi ikkita ustuni bo'ylab cho'zadi.

Nomlangan Grid Chiziqlari

Yanada aniqlik va nazorat uchun Subgrid bilan nomlangan grid chiziqlaridan foydalanishingiz mumkin. Aytaylik, sizning ota-ona griddingizda nomlangan chiziqlar mavjud:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Keyin siz ushbu nomlangan chiziqlarga subgriddingiz ichida murojaat qilishingiz mumkin:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Yashirin Treklarni boshqarish

Agar grid elementlari soni ota-ona griddagi belgilangan treklar sonidan oshib ketsa, Subgrid yashirin treklar yaratadi. Siz bu yashirin treklar o'lchamini oddiy CSS Grid-ga o'xshash grid-auto-rows va grid-auto-columns xususiyatlari yordamida boshqarishingiz mumkin.

Amaliy misollar va qo'llash holatlari

Keling, Subgrid-dan murakkab joylashuvlarni yaratish uchun qanday foydalanish mumkinligini ko'rsatadigan ba'zi amaliy misollarni ko'rib chiqaylik.

Murakkab mahsulotlar ro'yxati

Bir nechta mahsulot tafsilotlarini (rasm, nom, tavsif, narx) izchil va tekislangan tarzda ko'rsatmoqchi bo'lgan mahsulotlar ro'yxatini tasavvur qiling. Subgrid bunga osongina erishishga yordam beradi.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Mahsulot 1">
    <h3>Mahsulot nomi 1</h3>
    <p>Mahsulot 1 tavsifi.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Mahsulot 2">
    <h3>Mahsulot nomi 2</h3>
    <p>Mahsulot 2 tavsifi.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

Ushbu misolda, .product elementlari rasm, nom, tavsif va narxni barcha mahsulotlar bo'ylab, hatto ularning kontent uzunligi turlicha bo'lsa ham, izchil tekislash uchun Subgrid-dan foydalanadi. Bu toza va professional taqdimotni ta'minlaydi.

Jurnal uslubidagi joylashuv

Turli xil kontent bloklari bilan jurnal uslubidagi joylashuvlarni yaratish qiyin bo'lishi mumkin. Subgrid joylashuvning turli qismlari bo'ylab elementlarni tekislashga imkon berib, jarayonni soddalashtiradi.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Asosiy maqola sarlavhasi</h2>
    <p>Asosiy maqola mazmuni...</p>
  </div>
  <div class="sidebar-article">
    <h3>Yon panel maqolasi sarlavhasi</h3>
    <p>Yon panel maqolasi mazmuni...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Asosiy rasm">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

Ushbu misolda asosiy maqola, yon panel maqolasi va asosiy rasm bir xil grid tuzilmasiga ega bo'lib, turli bo'limlarda sarlavhalar va kontentning izchil tekislanishini ta'minlaydi. Subgrid-dan foydalanish CSS-ni soddalashtiradi va joylashuvni yanada qulayroq qiladi.

Forma joylashuvlari

Tekislangan yorliqlar va kiritish maydonlari bilan murakkab forma joylashuvlarini yaratish qiyin bo'lishi mumkin. Subgrid to'g'ridan-to'g'ri yechimni taqdim etadi.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Ism:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Xabar:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Ota-ona griddagi trek o'lchamlarini belgilash */
    gap: 10px;
}

Bu yerda .form-row elementlari barcha qatorlarda yorliqlar va kiritish maydonlarini izchil tekislash uchun Subgrid-dan foydalanadi. Trek o'lchamlari ota-ona griddagi (.form-grid) belgilanadi, bu esa bir xil ko'rinishni ta'minlaydi.

Eng yaxshi amaliyotlar va mulohazalar

Mustahkam Grid asosidan boshlang: Subgrid-ni joriy qilishdan oldin, ota-ona griddingiz yaxshi belgilangan va moslashuvchan ekanligiga ishonch hosil qiling.
Nomlangan Grid Chiziqlaridan foydalaning: Nomlangan grid chiziqlari, ayniqsa murakkab joylashuvlarda, o'qilishi va qo'llab-quvvatlanishini yaxshilaydi.
Puxta sinovdan o'tkazing: Subgrid joylashuvlaringizni turli brauzerlar va qurilmalarda sinab ko'ring, bu esa izchil ko'rsatilishini ta'minlaydi.
Maxsus ehtiyojlarni hisobga oling: Semantik HTML-dan foydalanish va tegishli ARIA atributlarini taqdim etish orqali Subgrid joylashuvlaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.
Subgrid-dan ortiqcha foydalanmang: Subgrid kuchli bo'lsa-da, u har doim ham eng yaxshi yechim emas. Kamroq murakkab joylashuvlar uchun Flexbox yoki oddiy Grid kabi soddaroq muqobillarni ko'rib chiqing.

Subgrid va oddiy CSS Grid

Subgrid va CSS Grid ikkalasi ham kuchli joylashuv vositalari bo'lsa-da, ular turli maqsadlarga xizmat qiladi. Oddiy CSS Grid umumiy sahifa joylashuvlarini yaratish va kontentingizning asosiy tuzilishini belgilash uchun idealdir. Boshqa tomondan, Subgrid ichki joylashuvlarni boshqarish va bir nechta ichki darajalar bo'ylab kontentni tekislash uchun eng mos keladi. Subgridni murakkab joylashuv stsenariylarini soddalashtiradigan CSS Grid-ning kengaytmasi deb o'ylang.

Umumiy muammolarni bartaraf etish

Subgrid ishlamayapti: Brauzeringizning mosligini ikki marta tekshiring va subgrid elementida grid-template-columns: subgrid; va/yoki grid-template-rows: subgrid; ni o'rnatib, Subgrid-ni yoqganingizga ishonch hosil qiling.
Tekislash muammolari: Ota-ona griddingizdagi trek o'lchamlari to'g'ri belgilanganligini va subgrid elementlari grid-column va grid-row yordamida to'g'ri joylashtirilganligini tekshiring.
Kutilmagan joylashuv buzilishlari: Har qanday moslashuvchan dizayn muammolarini aniqlash va tuzatish uchun joylashuvingizni turli ekran o'lchamlarida sinab ko'ring.

Xulosa

CSS Subgrid - bu CSS Grid vositalar to'plamiga qimmatli qo'shimcha bo'lib, murakkab ichki joylashuvlarni boshqarish va vizual jozibador, qo'llab-quvvatlanadigan va moslashuvchan veb-dizaynlarni yaratishning kuchli usulini taklif etadi. Asosiy tushunchalarni tushunib, amaliy misollarni o'rganib, siz an'anaviy CSS usullari bilan erishish qiyin yoki imkonsiz bo'lgan murakkab joylashuvlarni yaratish uchun Subgrid-dan foydalanishingiz mumkin. Subgrid-ni qabul qiling va veb-dasturlash loyihalaringizda yangi imkoniyatlarni oching. Subgrid sizga CSS grid kuchini ichki elementlarga chindan ham kengaytirish imkonini beradi, bu esa ko'proq nazorat va kodni qo'llab-quvvatlash imkonini beradi. U bilan tajriba qilib ko'ring va murakkab CSS joylashuvlarini soddalashtirishdagi afzalliklarini o'rganing.

MLOG