Оё шумо ягонда системи шабл (системи шабл, тарҳи шабл) истифода бурдаед? Агар ҳа, кадомашро бештар дӯст медоред?

Оё, ман истифода бурдаам.

Ман афзал медонам, ки CSS Grid Layout-ро истифода кунам.

Асосӣ сабабҳо:

• Табии. Ин стандартии CSS аст, ки ниёз ба китобхонаҳои беруна надорад.
• Ихтиёр. Имкон медиҳад, ки тарҳҳои дуҷонибаи мураккаб (хатҳо ва сутунҳо) бо дақиқии баланд ва назорат бар ҷойгиршавии унсурҳо сохта шаванд.
• Ҷавобгӯ. Ба осонӣ ба андозаи гуногуни экранҳо мутобиқ мешавад, бо истифода аз @media ва воҳидҳои мисоли fr.
• Тозаии код. Дар муқоиса бо модели қуттӣ, Grid аксар вақт маркёрро содда мекунад ва ниёз ба унсурҳои иловагӣ кам мекунад.

Маслиҳати асосӣ:

/*
  Элементҳои пӯшиш бо display grid.
  Мо се сутуни баробар паҳн ва ду сатр бо баландии автоматиро муайян мекунем.
*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px; /* Фосила байни унсурҳо */
}

/*
  Мисоли ҷойгиршавии унсур дар шабақа.
  Унсурро дар ду сутун васеъ мекунем, аз дуввум оғоз мешавад.
*/
.item {
  grid-column: 2 / span 2;
}

Ман инчунин қаблан аз Bootstrap Grid System истифода мекардам, ки асосан бар асоси Flexbox аст. Он барои сохтани зудтар тарҳҳои оддӣ кӯмак мекунад, аммо барои структураҳои мураккаб камтар чандир аст ва ба синфҳои махсуси CSS вобаста аст.

Ҳамагон, CSS Grid воситаҳои қавитар ва чандиртарро барои сохтани тарҳҳои муосир ва мураккаб пешниҳод мекунад, бе ниёз ба истифодаи рамзҳои беруна.