10 przydatnych fragmentów kodu siatki CSS

Specyfikacja siatki CSS nie jest dokładnie „nowa”, ale jest zdecydowanie nowsza w głównym nurcie deweloperów. Wielu programistów frontendów nie wie jeszcze nawet o właściwościach siatki CSS, nie mówiąc już o tym, jak mają one zastosowanie do interfejsu.

Możesz znaleźć wiele samouczków, przeszukując okolicę, ale polecam też zapoznanie się z fragmentami kodu. W ten sposób zanurzasz się w rzeczywistych projektach, aby zobaczyć, jak siatki CSS działają na aktywnej stronie internetowej.

Ta kolekcja powinna oferować mnóstwo zasobów, które pomogą Ci uczyć się, dostosowywać i zmieniać styl siatek CSS do wszystkiego, co robisz w Internecie.

1. Blok bohatera z wieloma obrazami

Zacznijmy od tego naprawdę fajnego bloku bohatera zaprojektowanego z właściwościami siatki. Ten projekt naśladuje sekcję przedstawiającą bohatera strony głównej, którą można znaleźć w wielu witrynach w stylu czasopism.

Deweloper Rachel Andrew stworzyła to, używając trochę niestandardowego CSS z własnych projektów. Działa niesamowicie dobrze, a konstrukcja w pełni reaguje na rozruch.

Nie wspominając o tym, że wygląda fantastycznie na ekranach telefonów komórkowych; nie jest to coś, co zawsze można znaleźć w dużych blokach obrazu.

Jest to doskonałe źródło do studiowania siatek CSS i przydatny fragment kodu dla każdego, kto pisze motyw bloga w stylu magazynu.

2. Układ siatki CSS

W tej wersji demonstracyjnej przy ustawieniu „gęsty” właściwość grid-auto-flow jest wyświetlana na pełnym ekranie. Zmusza to elementy do wciśnięcia się w dół strony w miarę zmiany rozmiaru siatki.

Dzięki temu ustawieniu masz dużą kontrolę nad tym, które elementy strony zmieniają pozycje, gdzie te zmiany mają miejsce i jak siatka powinna reagować. To zajmuje pierwsze miejsce nad zapytaniami medialnymi, które są używane głównie w projektowaniu responsywnym.

Jeśli nie masz pewności, co robi ten kod, pamiętaj: Google jest Twoim przyjacielem! Wiele świetnych postów i wątków Stack Overflow obejmujących całą konfigurację.

3. Nie tak upiorne fakty o dyni

Oto całkiem fajny fragment zawierający kilka podstawowych faktów dotyczących dyni. Cóż, fakty z dyni zorganizowane przez układ siatki CSS.

Kod faktycznie działa na SCSS/Sass, co oznacza, że ​​będziesz potrzebować trochę znajomości języka, aby się zagłębić. Ale możesz także skompilować kod Sass do surowego CSS bezpośrednio w CodePen, jeśli chcesz zobaczyć podstawowe właściwości.

Jedną z moich ulubionych rzeczy w tym projekcie jest kolor i typografia. Naprawdę krzyczy Halloween z ikoną dyni i wszystkimi odcieniami żółci/pomarańczy.

4. Automatyczny układ sześciokątny

To chyba jeden z najbardziej praktycznych projektów, jakie znalazłem w tej galerii. Spójrz na ten styl siatki i spróbuj zmienić rozmiar przeglądarki.

Zauważysz, że elementy w kształcie sześciokąta zostaną ponownie sformatowane, aby pasowały do ​​​​strony. Jest to prawdopodobnie najlepszy sposób na obsługę złożonych stron z dużą ilością zdjęć. Często spotykam się z tego typu layoutem na stronach konferencji i stron „o nas” dla firm z dużą ilością pracowników.

Teraz dzięki strukturze siatki CSS nie musisz się martwić o ręczne style responsywne. A ten fragment kodu jest najlepszym miejscem do rozpoczęcia planowania podobnego układu.

5. Pokedex w CSS Grid

Jeszcze nie widziałem czegoś tak kreatywnego jak ten Pokedex w siatce CSS. Opiera się na HTML i CSS z odrobiną JavaScript do automatycznego wypełniania rozmiarów komórek.

Gdy zmienisz rozmiar strony, zauważysz, że sama grafika również się powiększa. Jest to cholernie łatwe w obsłudze w CSS, a jeszcze łatwiejsze, gdy nauczysz się niektórych właściwości siatki.

Pamiętaj, że nie jest to interaktywne, więc nie możesz niczego klikać ani otwierać nowych stron. Ale z fundamentem układu osadzonym w kamieniu, dodanie tych funkcji byłoby cholernie proste.

6. Prosta siatka

Oto naprawdę ciekawy pomysł, który wprowadza style projektowania druku do sieci. Spójrz na ten przykład w CodePen zawierający wiele kolumn z nagłówkami i przewymiarowaną typografią.

Sam układ siatki opiera się na ustawionych kolumnach z predefiniowanymi przerwami. Oznacza to, że gdy zmieniasz rozmiar przeglądarki, niektóre kolumny łamią się zgodnie z tymi regułami.

To doskonały sposób, aby upewnić się, że określone kolumny zawsze pojawiają się obok siebie lub przynajmniej pojawiają się w widoku, dzięki czemu są łatwe do odczytania.

7. Siatka CSS z funkcją awaryjną Flexbox

Nie wszystkie przeglądarki nadążają za strukturą siatki CSS. Dlatego ten fragment uczy, jak zaprojektować niestandardową siatkę CSS, używając flexbox (i pływaków) jako rozwiązania awaryjnego.

Jest to w rzeczywistości trudne, ponieważ chcesz użyć właściwości siatki, jeśli są obsługiwane, ale chcesz, aby przeglądarka je zignorowała, jeśli nie. Na szczęście kod jest dobrze skomentowany, więc możesz się przekopać, a nawet spróbować dostosować niektóre funkcje dla siebie.

Nie nazwałbym tego idealnym rozwiązaniem awaryjnym, ale to zdecydowanie lepsze niż nic.

8. Prezentacja terminologii sieci

Nie masz pewności co do całej tej mylącej terminologii siatki CSS? Wtedy ten fragment może pomóc w wyjaśnieniu sytuacji.

Jeśli zagłębisz się w ten przykład, znajdziesz kilka wyróżnionych funkcji z opisami wyjaśniającymi siatki po drodze. Dowiesz się również, jak prawidłowo patrzeć na linie siatki i jak dokładnie wyświetlać siatki CSS na stronie.

Pamiętaj, że nie dowiesz się wszystkiego z tego demo, ponieważ nie obejmuje ono wszystkiego. To tylko małe wprowadzenie do najłatwiejszych właściwości z pomocami wizualnymi.

9. Korzystanie z kolumn szablonów siatki: powtórz ()

Aby zapoznać się z bardzo konkretnym przykładem właściwości grid-template-columns, rzuć okiem na to demo na żywo. Pokazuje, jak korzystać z funkcji powtarzania zamiast wielokrotnie deklarować tę samą wartość kolumny w swoim CSS.

Ponownie, obsługa przeglądarek wciąż nadrabia zaległości, ale większość nowoczesnych przeglądarek internetowych działa z tą techniką.

Nie wspominając o tym, że w CSS znajdziesz mnóstwo komentarzy, które pomogą Ci zrozumieć, co to robi.

10. Czysta krzyżówka siatki CSS

Aby zakończyć zabawną notatką, spójrz na czystą krzyżówkę CSS Adriana Rowortha. Cały ten układ jest zbudowany wyłącznie na kodzie HTML i CSS, w szczególności na właściwościach siatki CSS dla struktury układu.

Jeszcze bardziej szalone jest to, że możesz wpisać treść w polach z krzyżówkami, aby faktycznie rozwiązać zagadki. Jakie to jest świetne!

Zauważ, że ta rzecz jest dość złożona i jest to jeden z niewielu wymienionych tutaj projektów, który nie jest przyjazny dla urządzeń mobilnych. Ale to dowód na to, jak daleko zaszliśmy z układami siatki w sieci, więc mam nadzieję, że w niedalekiej przyszłości zobaczymy o wiele więcej tego rodzaju rzeczy.