Front - Siatki / RWD / AWD (bez Bootstrapa). Media query, Flexbox, CSS Grid

pytanie zadane 3 kwietnia 2021 w HTML i CSS przez reaktywny Nałogowiec (44,780 p.)
edycja 3 kwietnia 2021 przez reaktywny

Chciałem podpytać o nowsze rozwiązania "na frontcie", służące uzyskaniu responsywności strony. Duże strony podobno robi się głównie w Bootstrap (lub Foundation czy podobnych bibliotekach). W mniejszych i średnich projektach często siatki tworzy się z pomocą Flexboxa i nowszego rozwiązania - CSS Grid. Nie znam żadnego z nich, trochę pobieżnie przeczytałem różnice. Wiem, że Flexbox jest starszy ale lepiej wspierany przez przeglądarki, a CSS Grid jest nowsze, ale ma większe możliwości, więcej bajerów, ponoć lepiej się w nim pisze (w pewnym sensie to następca Flexboxa, choć można używać obydwu jednocześnie).

Mam kilka pytań, co Waszym zdaniem lepsze? (krótko: Dlaczego? W jakich zastosowaniach wypada korzystniej?). CSS Grid wydaje się być lepszy, przyszłościowy... Choć niektórzy piszą, że lepiej poznać oba.

Co z Media Queries, warto też je poznać, czy CSS Grid załatwia sprawę i MQ nie są już potrzebne?

Z czego warto się uczyć CSS Grid (ew. Flexbox)? Znalazłem póki co dość dobre opracowanie, wprowadzenie na stronach Mozilla (MDN).

1 odpowiedź

odpowiedź 3 kwietnia 2021 przez SzkolnyAdmin Szeryf (89,030 p.)

Czego się uczyć? Obu: flexa i grida. Często część strony jest w gridzie (główna siatka), część we fleksie (np. ułożenie elementów w pojemniku, tak, aby same się "zawijały" przy zmianie szerokości ekranu. Grid nie zastąpi ci MQ. Grid to siatka strony, a jaką siatkę zastosować, "powie" ci właśnie MQ.