Grid + Flexbox

CSS Grid i poznany nieco wcześniej Flexbox mogą wyglądać jak dwie konkurujące ze sobą techniki na rozmieszczanie elementów na stronie. Nie należy jednak o nich myśleć w ten sposób. Techniki te co prawda różnią się dość mocno od siebie, jednak dzięki temu świetnie się uzupełniają.

Dość częstą praktyką jest tworzenie całych layout stron za pomocą CSS Grid. Dzięki temu możemy szybko, łatwo i czytelnie stworzyć szkielet naszej strony i rozmieścić na niej najważniejsze (największe) elementy. Dzięki dość prostej do osiągnięcia responsywności (poznanej w poprzednim temacie) możemy za pomocą dosłownie kilku linijek kodu CSS zmieniać diametralnie wygląd strony.

Z kolei każdy element znajdujący się na siatce może być kontenerem flexboxa i rozmieszczać znajdujące się w nim elementy już przy użyciu tej właśnie techniki.

Widzimy więc, że zastanawianie się nad tym, czy użyć w naszym projekcie Flexboxa, czy może Grida powinno zostać zastąpione rozważaniem w jaki sposób użyć tych dwóch technik jednocześnie, aby maksymalnie uprościć sobie pracę 🙂

🔗 Dodatkowe materiały:

• Flexbox or grid - How to decide?