Reaktywny layout w 2021 roku

Disclaimer: mam dwie lewe ręce jeśli chodzi o CSS, całe moje doświadczenie sprowadza się do pisania „hacków” w Stylusie/Stylishu do różnych stron.

Chcę zrobić prosty layout w klasycznym stylu do bloga. Uwidziałem sobie, żeby wyglądało to mniej-więcej tak:
Na większych ekranach:

logo (cztery przyciski nawigacyjne)
navbar treść
stopka

Na mniejszych:

logo
(cztery przyciski nawigacyjne)
navbar
treść
stopka

Chciałbym żeby te (cztery przyciski nawigacyjne) były rozmieszczone 2 × 2.

Jak się to robi we współczesnych czasach? display: grid? display: flex? Jakieś @media, czy bez tego?

Jest do tego w sieci za dużo materiałów, każdy doradza inaczej, a ja po prostu nie wiem, czy proponowane metody są z epoki kamienia łupanego, czy „normalne”, czy z krainy przyszłości obsługiwanej przez 5% przeglądarek… Chciałbym uniknąć JavaScriptu — całkowicie, jeśli się da.

https://css-tricks.com/snippets/css/complete-guide-grid/
To jest prawdopodobnie wszystko czego potrzebujesz na temat grida. I tak - grid jest teraz dobrą opcją i pozwala zrobić bardzo szybko dokładnie to o co pytasz.

PS: Nie reaktywny tylko ew. responsywny layout.

A co z samym @media? Dobre, złe; nowoczesne, przestarzałe; używać, unikać? Jeśli zastąpić, to czym?

Warto, a nawet trzeba, w połączeniu z czymś innym - tzn. za pomocą media query możesz zmieniać układ gria, w zależności od wielkości ekranu, więc dla dużych ekranów będzie np. mieć układ 2x2, a poniżej np. 600px będzie 3x1

OK, czyli jeszcze raz do potwierdzenia — najlepszą¹ współczesną metodą, by uzyskać responsywny layout, jest @media i odpytywanie o rozdzielczość ekranu? Czy mogę założyć, że to będzie OK, czy muszę myśleć o jakichś przypadkach szczególnych, typu telefony z wyświetlaczami o wysokim DPI?

¹ Gdzie przez „najlepszość” rozumie się, w kolejności od najważniejszych do najmniej ważnych: szerokość implementacji (nie musi działać na przeglądarce na Kindle’a czy innych dzikich wynalazkach, ale tak z >98% ludzi to zobaczy jak powinna lub z co niewielkimi przekłamaniami, nie uniemożliwiającymi korzystanie ze strony), lekkość po stronie klienta (przeglądarki nie mają problemu z wyrenderowaniem tego), łatwość obsługi (trudno przez przypadek napisać źle i na przykład mieć na jakiejś podklasie desktopów wyświetlaną wersję komórkową lub na odwrót, bo coś-tam się nie policzyło) i możliwość późniejszej edycji.