CSS Grid

Ин барои чӣ лозим аст

Flexbox унсурҳоро дар як хат (қатор ё сутун) ҷойгир мекунад. Агар тӯр лозим бошад-чӣ — сатрҳо ва сутунҳо ҳамзамон? Галереяи аксҳо, сафҳаи хабарҳо, тартиби «сарлавҳа — меню — матн — поён». Барои ин CSS Grid ҳаст. Агар flex — мӯҳраҳо дар ресмон бошад, grid — тахтаи шоҳмот аст.

Тӯрро фаъол мекунем

<style>
  .grid {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    gap: 10px;
  }
  .grid div { background: skyblue; padding: 20px; }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

Натиҷа: ду сатр, ҳар кадом се блок; сутуни мобайнӣ аз паҳлӯиҳо ду баробар васеътар; байни ҳамаи блокҳо 10px.

Мо сатрҳоро надодем — онҳо худ аз худ сохта мешаванд, вақте унсурҳо ба сатри якум ҷо намешаванд. grid-template-columns барҳои сутунҳоро бо фосила номбар мекунад.

Воҳиди fr

fr (fraction, ҳисса) — ҳиссаи ҷои холӣ:

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; }

Натиҷа: се сутун, мобайнӣ ду баробар васеътар; якҷоя онҳо ҳамеша тамоми бари зарфро мегиранд ва ҳангоми танг шудани равзана худашон мутобиқ мешаванд.

Омехта кардан мумкин: 200px 1fr — сутуни чап 200px, рост — ҳамаи боқимонда.

repeat ва minmax

Барои он ки 1fr 1fr 1fr 1fr нанависем:

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

minmax(ҳадди ақал, ҳадди аксар) андозаро «аз ва то» медиҳад. Усули машҳури «ҳар қадар сутун, ки ҷо шавад»:

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

Натиҷа: кортҳо на тангтар аз 200px; дар экрани васеъ — 5 дар қатор, дар телефон — 1. Бе ягон медиадархост.

Сатрҳо

.grid { grid-template-rows: 80px 1fr 60px; }

auto — баландӣ аз рӯи мундариҷа. Сатрҳо ва сутунҳо якҷоя катакҳоро ташкил медиҳанд, хатҳои байни онҳо аз 1 рақамгузорӣ мешаванд: се сутун хатҳои 1, 2, 3, 4 дорад.

Кашидан ба якчанд катак

Ба унсур гуфтан мумкин аст, ки чанд катакро ишғол мекунад:

.big {
  grid-column: span 2; /* 2 сутун */
  grid-row: span 2;    /* 2 сатр */
}
.wide {
  grid-column: 1 / 4;  /* аз хати 1 то хати 4 = 3 сутун */
}
.full {
  grid-column: 1 / -1; /* аз хати якум то охирин — ба тамоми бар */
}

Натиҷа: .big — квадрати 2×2 катак, унсурҳои дигар онро давр мезананд; .full ба тамоми сатр кашида шудааст.

Минтақаҳои номдор

Роҳи аз ҳама намоён — тартибро бо калимаҳо кашидан:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
.page header { grid-area: header; }
.page nav    { grid-area: nav; }
.page main   { grid-area: main; }
.page footer { grid-area: footer; }

Натиҷа: сарлавҳа ба тамоми бар, дар поён дар чап меню 200px ва дар рост матн, дар поён поёни саҳифа ба тамоми бар.

Ҳар сатр дар нохунак — як сатри тӯр, калимаҳо — катакҳо. Калимаҳои якхелаи ҳамсоя ба як минтақа муттаҳид мешаванд. Нуқтаи . — катаки холӣ. Минтақаҳо бояд росткунҷа бошанд.

Grid ё Flexbox?

• Flexbox — вақте унсурҳо дар як хат меистанд ва андозаашон аз мундариҷа вобаста аст: меню, тугмаҳо, сарлавҳа.
• Grid — вақте тӯр бо сутунҳо ва сатрҳои ҳамвор лозим аст: галерея, тартиби саҳифа.

Онҳоро аксар вақт якҷоя мекунанд: саҳифа — grid, сарлавҳа дар дохил — flex.

Дар дохил чӣ тавр кор мекунад

Браузер аввал аз рӯи grid-template-columns ва grid-template-rows «панҷараи ноаён» месозад (сутунҳо бо fr он чиро тақсим мекунанд, ки баъди пикселҳо монд). Баъд фарзандонро ба катакҳо ҷойгир мекунад: навбат ба навбат аз чап ба рост, унсурҳо бо span, рақами хатҳо ё grid-area — ба ҷойҳои худ. Панҷараро дар абзорҳои барномасоз дидан мумкин: дар паҳлӯи зарф нишонаи grid ҳаст.

Хатоҳои маъмул

1. display: grid дар фарзандон. Тӯр дар зарф фаъол мешавад.
2. % омехта бо gap. 25% 25% 25% 25% ҷамъ gap ба бар ҷо намешавад. Бо fr чунин намешавад.
3. Хатои имлоӣ дар номи минтақаҳо. grid-area: hedaer — унсур хомӯшона ба катаки худкор меравад.
4. Минтақаи ғайриросткунҷа. "a a" "a b" — минтақаи a бо шакли «Г» — мумкин нест, тамоми қолаб вайрон мешавад.
5. Ба фарзандон барои сутунҳо width медиҳанд. Бари сутунҳоро зарф медиҳад, на унсурҳо.

Ёддошт

Хусусият	Чӣ кор мекунад
display: grid	тӯрро фаъол кардан
grid-template-columns: 1fr 2fr	сутунҳо
grid-template-rows: auto 1fr	сатрҳо
repeat(3, 1fr)	такрор кардан
repeat(auto-fill, minmax(200px, 1fr))	ҳар қадар ки ҷо шавад
gap: 10px	фосилаҳо
grid-column: span 2 / 1 / -1	ба 2 сутун / ба тамоми бар кашидан
grid-row: span 2	ба 2 сатр кашидан
grid-template-areas + grid-area	тартиб аз рӯи минтақаҳои номдор