Grid 12-ustunli maket

CSS 12 ustunli grid maketi

12 ustunli grid — veb-sahifa kontentini tuzilma qilishda, ayniqsa moslashuvchan veb-dizaynda keng tarqalgan va moslashuvchan usul.

12 ustunli grid tizimi mavjud gorizontal maydonni 12 ta teng kenglikdagi ustunga bo‘ladi — maket ichida elementlarning aniq joylashuvi va o‘lchash imkonini beradi.

12 ustunli gridning afzalliklari

Moslashuvchanlik: 12 soni yaxshi bo‘linadigan sondir. Dizaynerlar yarmi, uchdan biri va choragi bilan dizaynlar oson yaratishlari mumkin (6 dan 2 ustun, 4 dan 3 ustun, 3 dan 4 ustun).
Moslashuvchanlik (responsiveness): 12 ustunli grid media so‘rovlar bilan turli ekran o‘lchamlariga (kompyuter, planshet yoki mobil) moslashuvchan saytlar qurish uchun ideal. Bu barcha platformalarda bir xil foydalanuvchi tajribasini beradi.
Samaradorlik: Oldindan belgilangan struktura dizayn jarayonini tezlashtiradi.

Mana asosiy 12 ustunli CSS Grid maketini yaratish usuli:

Grid konteynerni belgilash

Grid konteynerga display: grid; qo‘llang.

12 ustunni yaratish

12 ustunni belgilash uchun grid-template-columns xossasidan foydalaning.

repeat(12, [col-start] 1fr); kodi teng kenglikdagi 12 ustunli grid yaratadi va har bir ustun yo‘nalishining boshlanish chizig‘ini col-start deb nomlaydi.

repeat(12,..): gridga keyingi yo‘nak ta’rifini 12 marta takrorlashni aytadi — 12 ustun hosil bo‘ladi.
[col-start]: Bu nomlangan grid chizig‘ini yaratadi. 12 marta takrorlangani uchun col-start deb nomlangan 12 chiziqqa ega bo‘lasiz. Bu grid elementlarini grid ichidagi aniq boshlanish nuqtalariga joylashtirish uchun foydali.
1fr: grid konteynerdagi umumiy mavjud maydonning bir ulushini ifodalovchi kasr birlik. 1fr ishlatilsa, 12 ustunning har biri teng, oqim (fluid) kenglikka ega bo‘ladi.

Grid elementlarini joylashtirish

Keyin grid elementlari grid-column yordamida bu 12 ustun bo‘ylab joylashtiriladi va o‘lchanadi.

Grid elementni muayyan miqdordagi ustunlarga cho‘zish uchun grid-column: span <number>; yoki grid-column: <start-line> / span <number>; dan foydalaning.
Element uchun boshlanish va tugash grid chiziqlarini grid-column: <start-line> / <end-line>; yordamida ham belgilashingiz mumkin.

Media so‘rovlar bilan breakpoint qo‘shish

Har doim avval mobil uchun loyihalang: Bu yerda bo‘limlarni 576 pikseldan kichik ekranlar uchun manba tartibida (yuqoridan pastga) ko‘rsatamiz.

Keyin 576 va 767 piksel kenglikdagi ekranlar uchun ikki ustunli maketga o‘tamiz.

Keyin 767 pikseldan keng ekranlar uchun uch ustunli maketga o‘tamiz.

Misol

12 ustunli grid maketining to‘liq misoli:

* {
box-sizing: border-box;
}

.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}

@media (min-width: 576px) {
.sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
}
.ads {
    grid-column: col-start / span 3;
}
.content, .footer {
    grid-column: col-start 4 / span 9;
}
nav ul {
    display: flex;
    justify-content: space-between;
}
}

@media (min-width: 768px) {
.nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
}
.content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
}
.sidebar {
    grid-column: col-start 11 / span 2;
}
.ads {
    grid-column: col-start 11 / span 2;
}
.footer {
    grid-column: col-start / span 12;
}
nav ul {
    flex-direction: column;
}
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish