Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Чи потрібний CSS Flexbox, коли вже є підтримка CSS Grid?

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

У моїй практиці дуже мало було верстки сайтів. Колись використовував Bootstrap 3, і тільки-но почав вивчати Bootstrap 5, але на офіційному сайті прочитав ось таке:

Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.

Ця цитата мене відштовхнула від подальшого вивчення Bootstrap, оскільки самі автори цього фреймворка натякають, що вже є нові HTML/CSS технології, замінники Bootstrap сітки (що є по-суті основою Bootstrap).

Зрозуміло, що Bootstrap надає підтримку як нових, так і старих версій браузерів. Але в моєму випадку це не важливо, і можна вважати що в усіх юзерів самі останні версії Google Chrome.

Далі я почав вивчати гайд від Mozilla — CSS layout — і побачив що там вивчаються спочатку CSS Flexbox, а потім вже і CSS Grid.

У зв’язку із цим у мене питання: «Чи потрібний CSS Flexbox, коли вже є підтримка CSS Grid?».

На скільки я знаю, CSS Grid — це сама нова система макетів, але не зрозуміло чи вона може у повній мірі замінити усі можливості Flexbox, чи все-таки Flexbox ще потрібний навіть для самих нових браузерів? Підкажіть, пліз, хто в курсі.

👍ПодобаєтьсяСподобалось1
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Відповідь на запитання у заголовку теми: так, потрібен, бо css grid не заміняє css flex, а виконує трошки іншу роботу, що вже в коментарях писали.

Але, відходячи від теми семантики, можна подивитись на те, скільки процесорного часу з‘їдає grid в порівнянні з flex. Тому раджу застосовувати правило: якщо щось можна зробити без grid, то краще робити за допомогою flex, але якщо можна і без flex, то і flex краще не використовувати.

P.S. Кинути вивчати css framework через те, що в ньому не використовуються найновітніші технології — це якесь джунство вищого розряду.

можна подивитись на те, скільки процесорного часу з‘їдає grid в порівнянні з flex

І як це зробити?

Гриды не замена флексам, они здорово работают вместе.
В свое время очень доставил экзампл: redonion.se/cssgrid

Я бы для начала все же разобрался с Flexbox. У меня только через год активного использования начала формироваться картина того как это работает. Иными словами, пока не будет понимания чем отличается align-items от align-content и почему нужно указывать min-width: 0; за grid лучше не браться.

Не можу зробити додаткове завдання для цієї вправи developer.mozilla.org/...​id_skills#grid_layout_two
Перший елемент повинен бути на першому місці (щоб закривав другий елемент). Як це зробити?

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

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

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

Так, із цим завданням я справився також, а під ним є ще Additional questions.

.item1 {
  grid-row: 1 / -2;
  grid-column: 1 / -2;
  z-index: 1;
}

Я чомусь думав, що це потрібно зробити за допомогою суто грідовських властивостей.

Вот пример (Multi Select Story): podoprigora.github.io/...​nous-request#multi-select
понятия не имею как сделать теги с помощью css grid, так чтобы input при переносе на новую строку занимал всю ширину (буду рад если кто подскажет), с помощью flexbox делается относительно просто.
Еще пример: podoprigora.github.io/...​mui-custom-chip—examples, для css grid есть конструкция:

grid-template-columns: repeat(auto-fit, minmax([min-value], auto))
но это совсем другое поведение, блоки будут сужаться до минимальной указанной ширины, после чего будут перенос на новую строку.
CSS Flexbox

треба знати все одно якщо хочете займатись верстанням. Тим паче в них багато спільного.

То, что у него под капотом вполне себе соответствует новым css фичам

Не сумніваюсь, але by default у нього все ж стара сітка, і повно коду для сумісності браузерів.

Підписався на коментарі, DOU вже час показувати «скільки підписались на тему», бо також цим цікавився, вивчав по cssgridgarden.com

Підписатись на коментарі