Jak połączyć siatki Flexbox i CSS, aby uzyskać wydajne układy

Nota redaktora: Ten gościnny wpis został napisany przez Abbey Fitzgerald, inżyniera oprogramowania UX i projektanta stron internetowych, który uwielbia sztukę tworzenia kodu.

W przeszłości właściwości CSS typu float były jedną z głównych metod rozmieszczania elementów na stronie internetowej. A jeśli kiedykolwiek pracowałeś w ten sposób, wiesz, że nie zawsze jest to idealne rozwiązanie w przypadku złożonych układów. Na szczęście we współczesnej erze projektowania stron internetowych wyrównywanie elementów stało się znacznie prostsze dzięki Flexbox i CSS Grids.

Kiedy pojawił się Flexbox, znacznie ułatwił wyrównanie i od tego czasu jest powszechnie stosowany. Układy siatki CSS wywołały również wiele emocji w społeczności projektantów stron internetowych. Jakiś czas temu przyjrzeliśmy się, jak stworzyć podstawowy układ siatki CSS. Chociaż nie jest powszechnie stosowany, przeglądarki zaczynają go obsługiwać. Gdy jest w pełni obsługiwany, będzie to miało ogromny wpływ na projekty. Obsługa przeglądarek cały czas rośnie; koniecznie sprawdź, czy mogę użyć, aby uzyskać najbardziej aktualne informacje.

Teraz możesz się zastanawiać, co dalej; w końcu Flexbox i CSS Grid Layouts wydają się osiągać podobne wyniki. Nie jest to jednak debata Flexbox kontra Grid, ale bardziej nauka korzystania z nich razem. Im więcej bawiłem się zarówno Grid, jak i Flexbox, odkryłem, że nie musisz wybierać tylko jednego lub drugiego. W niedalekiej przyszłości, kiedy CSS Grid Layouts będzie w pełni obsługiwane przez przeglądarki, projektanci będą mogli wykorzystać połączone zalety każdego z nich i tworzyć najbardziej wydajne i interesujące projekty.

Testowanie podstawowych układów Flexbox i CSS Grid

Aby ustalić, czy Flexbox lub CSS Grid lepiej sprawdzają się w Twoim przepływie pracy programistycznej, dobrym sposobem na sprawdzenie, jak działają i czy są zalety jednego z nich, jest utworzenie standardowego układu, który wykorzystuje tylko jeden lub drugi. Zaczniemy od bardzo prostego i dobrze znanego typu układu z nagłówkiem, paskiem bocznym, główną treścią i stopką. Taki prosty układ to szybki sposób na ustawienie różnych elementów.

I pamiętaj, nigdy nie powinieneś wprowadzać zmian w swojej aktywnej witrynie. Zamiast tego spróbuj poeksperymentować z Local, bezpłatną lokalną aplikacją programistyczną WordPress. Pobierz go już dziś!

Jak stworzyć układ za pomocą Flexbox

Ostatnio poruszałem temat tworzenia layoutu karty Flexbox. Ten post zawiera szczegółowe informacje o tym, jak działa Flexbox, wraz z konkretnymi informacjami CSS, więc jeśli jesteś początkującym użytkownikiem Flexboksa, pomoże ci to zapoznać się z jego działaniem.

W tym samouczku omówimy, co będziemy tworzyć:

Zobacz to na Codepen.

W przypadku tego podstawowego układu główne zadania Flexbox obejmują:

• Utwórz nagłówek i stopkę o pełnej szerokości
• Umieść pasek boczny obok głównego obszaru treści
• Prawidłowy rozmiar paska bocznego i głównego obszaru treści
• Pozycjonowanie elementów nawigacji

Podstawowa struktura HTML

 <div class="kontener">
        
    <nagłówek>
        <nawigacja>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <przycisk></przycisk>
    </header>
    <div class="wrapper">
        <obok klasy="pasek boczny">
            <h3></h3>
        </strona>
        <klasa sekcji="główna">
            <h2></h2>
            <p></p>
        </sekcja>
    </div><!-- /wrapper -->
    <stopka>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /kontener -->

Jak korzystać z elastycznego wyświetlacza

Stylizacja nagłówka

Zaczynając od zewnątrz i pracując w środku, dodając display: flex; do kontenera to pierwszy krok w każdym układzie Flexbox. Kierunek wygięcia jest ustawiony na kolumnę, więc spowoduje to ustawienie wszystkich sekcji pod sobą.

 .pojemnik {
    wyświetlacz: elastyczny;
    kierunek zginania: kolumna;
}

Tworzenie nagłówka o pełnej szerokości było dość automatyczne z display: flex; (nagłówki są domyślnie elementem na poziomie bloku). Dzięki tej deklaracji pozwoli na łatwe rozmieszczenie elementów nawigacyjnych.

Po lewej stronie znajduje się logo i dwie pozycje menu, a po prawej przycisk logowania. Nawigacja znajduje się w nagłówku, więc dzięki justify-content: space-between; nawigacja i przycisk zostaną automatycznie rozmieszczone.

Jedną z przydatnych rzeczy jest łatwość wyrównywania tekstu. W nawigacji, z align-items: baseline; , wszystkie elementy nawigacji są wyrównane do linii bazowej tekstu, dzięki czemu wyglądają bardziej jednolicie.

 nagłówek{
    wypełnienie: 15px;
    margines dolny: 40px;
    wyświetlacz: elastyczny;
    justify-content: odstęp między;
}
ul nagłówka {
    wyświetlacz: elastyczny;
    elementy wyrównania: linia bazowa;
    typ listy w stylu: brak;
}

Stylizacja zawartości strony

Następnie znajduje się pasek boczny i główne obszary zawartości z opakowaniem, które zawiera te dwa elementy. Div z klasą .wrapper również potrzebuje display: flex; ale kierunek zginania jest inny niż powyżej. Ponieważ pasek boczny i obszary zawartości są obok siebie, a nie ułożone w stos, kierunek wygięcia jest

Następnie znajduje się pasek boczny i główne obszary zawartości z opakowaniem, które zawiera te dwa elementy. Div z klasą .wrapper również potrzebuje wyświetlacza: flex; ale kierunek zginania jest inny niż powyżej. Ponieważ pasek boczny i obszary zawartości są obok siebie, a nie ułożone w stos, kierunek wygięcia to wiersz, co jest przeciwieństwem tego, co zrobiono w powyższym kontenerze.

 opakowanie {
    wyświetlacz: elastyczny;
    kierunek wygięcia: rząd;
} 

Rozmiar głównej sekcji i paska bocznego jest bardzo ważny, ponieważ tutaj znajdują się bardziej widoczne informacje. Główna zawartość powinna być trzy razy większa niż pasek boczny, co jest dość łatwe w przypadku Flexbox.

 .główny {
    elastyczność: 3;
    prawy margines: 60px;
}
.Pasek boczny {
   elastyczność: 1;
}

W przypadku tego fragmentu kodu użyłem skrótu. Wartości flex dotyczą właściwości flex-grow. Flex-grow jest potężny, ponieważ o tyle przedmiot (y) urośnie w stosunku do reszty elastycznych przedmiotów w tym samym pojemniku.

Ogólnie rzecz biorąc, Flexbox był dość wydajny w tworzeniu tego prostego układu. Szczególnie przydatna była kontrola nad stylem elementów listy i odstępami między nawigacją a przyciskiem.

Jak stworzyć układ za pomocą układów siatki CSS

Aby przetestować wydajność, następnym krokiem jest zbudowanie tego samego podstawowego układu za pomocą CSS Grid. Wszystkie elementy strony są takie same i zostaną ustawione w taki sam sposób, jak w przykładzie Flexbox.

Zobacz to na Codepen.

Obszary szablonu siatki

Jedną z przydatnych rzeczy w CSS Grid jest możliwość określania obszarów szablonów, co może sprawić, że definiowanie układów będzie bardzo intuicyjne. Przyjmując takie podejście, obszary na siatce można nazywać i odwoływać się do elementów pozycji. W przypadku tego podstawowego układu są cztery elementy, które musimy nazwać:

• nagłówek
• główna zawartość
• Pasek boczny
• stopka

Podstawowa struktura HTML

 <div class="kontener">
        
    <nagłówek>
        <nawigacja>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <przycisk></przycisk>
    </header>
  
    <obok klasy="pasek boczny">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </strona>
    <klasa sekcji="główna">
        <h2></h2>
        <p></p>
         <p> </p>
  </sekcja>
    <stopka>
        <h3></h3>
        <p></p>
    </footer>
</div>

Zdefiniujemy te obszary w naszym pojemniku z siatką w kolejności, tak jakbyśmy je rysowali. Rozmieszczę je również dla czytelności.

 obszary szablonów siatki:
        "nagłówek nagłówka"
        „główny pasek boczny”
        „stopka stopka”;

Zwróć uwagę, jak pasek boczny był wyświetlany przed głównym? Przełączenie ich spowodowałoby również zmianę kolejności na stronie. Obecnie pasek boczny znajduje się po lewej stronie, a główna zawartość po prawej, ale w razie potrzeby można go łatwo zmienić.

Jedna rzecz do zapamiętania: nazwy te muszą być „powiązane” ze stylizacją. Tylko dlatego, że zadeklarowano obszary szablonów siatki, nie wiemy, gdzie właściwie należy nagłówek. W bloku nagłówka, grid-area: header; trzeba dodać.

 nagłówek{
    obszar siatki: nagłówek;
    dopełnienie: 20 pikseli 0;
    wyświetlacz: siatka;
    kolumny szablonu siatki: 1fr 1fr;
}

Struktura HTML jest taka sama jak w przykładzie Flexbox, ale CSS jest zupełnie inny, aby utworzyć układ siatki.

 .pojemnik{
    maksymalna szerokość: 900px;
    kolor tła: #fff;
    margines: 0 automatyczny;
    dopełnienie: 0 60px;
    wyświetlacz: siatka;
    kolumny szablonu siatki: 1fr 3fr;
    obszary szablonów siatki:
        "nagłówek nagłówka"
        „główny pasek boczny”
        „stopka stopka”;
    przerwa w siatce: 50px;
}

Aby rozpocząć pracę z układem siatki CSS, bardzo ważne jest posiadanie display: grid; ustawić na pojemniku. Kolumny szablonu siatki są tutaj zadeklarowane, aby uzyskać ogólną strukturę strony. Pamiętasz, jak przykład Flexbox miał klasę .main ustawioną na flex-grow równą 3, a pasek boczny miał flex-grow równą 1, aby ustalić rozmiar? Tutaj kolumny szablonu siatki zostały ustawione jako 1fr i 3fr. W tym miejscu siatka nabiera kształtu z jednostkami ułamkowymi. Przy tych wartościach widać, że są dwie kolumny i nie są one równej szerokości. Kolumna ustawiona na 3fr jest trzy razy szersza od drugiej. To wyjaśnia, dlaczego pasek boczny wydaje się węższy niż obszar zawartości.

Następnie należy dostosować jednostki fr używane dla kontenera dla nagłówka. Kolumny szablonu siatki zostały dostosowane do 1fr i 1fr. W ten sposób będą dwie równe kolumny, a elementy nawigacyjne i przycisk będą pasować.

 nagłówek{
    obszar siatki: nagłówek;
    wyświetlacz: siatka;
    kolumny szablonu siatki: 1fr 1fr;
} 

Aby umieścić przycisk, wystarczy użyć justify-self i ustawić koniec.

 przycisk nagłówka {
    usprawiedliwiać się: koniec;
}

Nawigacja jest umieszczona tam, gdzie powinna:

 nagłówek nawigacyjny {
    uzasadnij siebie: start;
}

Stopka o pełnej szerokości nie wymaga ustawiania różnych kolumn, ponieważ treść znajduje się na środku.

Jak stworzyć układ za pomocą siatki Flexbox i CSS

Teraz, gdy widzieliśmy, co każda metoda może zrobić indywidualnie, nadszedł czas, aby stworzyć coś bardziej złożonego, łącząc Flexbox i CSS Grid Layouts.

Zobacz to na Codepen.

Oto podstawowy zarys uruchamiania sieci:

Zobacz to na Codepen.

Zauważ, jak projekt opiera się zarówno na kolumnach, jak i wierszach? Ten układ wymaga wyrównania i spójnego działania w obu kierunkach, więc użycie CSS Grid jest efektywne dla całego układu.

Planowanie jest kluczowe przy takim układzie. Dobrym pomysłem jest najpierw naszkicować to i zobaczyć, jak rzeczy układają się w stos, dosłownie. Aby rozpocząć kod, mając wyświetlacz: siatka; jest niezbędna; bez niego użycie tego typu układu nie będzie działać. Należy tutaj zwrócić uwagę na odstępy między blokami treści. Osiągnięto to za pomocą grid-column-gap i grid-row-gap.

 .pojemnik {
  wyświetlacz: siatka;
  kolumny szablonu siatki: 0,4 fr 0,3 fr 0,3 fr;
  odstęp w kolumnie siatki: 10px;
  odstęp między wierszami siatki: 15 pikseli;
}

Jednostki ułamkowe powróciły do ​​tego układu i teraz potrzebne są trzy obszary. Pierwsza wartość 0,4 fr jest nieco szersza niż druga i trzecia, które mają po 0,3 fr.

Układ kolumn i wierszy

W tym miejscu ważne jest, aby od początku odwoływać się do diagramu. Zaczynając od góry, tak jest umieszczony nagłówek. Obejmuje wszystkie kolumny i jeden wiersz.

 .nagłówek {
  początek kolumny siatki: 1;
  koniec kolumny siatki: 4;
  początek wiersza siatki: 1;
  koniec wiersza siatki: 2;
  kolor tła: #d5c9e2;
}

Jeśli chcesz użyć skrótu, wartości początkowa i końcowa znajdują się w tym samym wierszu i są oddzielone ukośnikiem. Wyglądałoby to tak:

 .nagłówek {
  kolumna siatki: 1 / 4;
  rząd siatki: 1 / 2;
  kolor tła: #55d4eb;
}

Aby umieścić wszystkie inne elementy, wystarczy dodać odpowiednie wartości siatki i kolumny do CSS. Zamiast przeglądać je tutaj jeden po drugim, ten przykład jest na Codepen.

Po zbudowaniu układu siatki następnym krokiem jest dopracowanie zawartości.

Nawigacja

Flexbox jest idealny do umieszczania elementów nagłówka. Podstawowy przykład układu dotyczył tego za pomocą justify-content: space-between. Przykład siatki musiał mieć justify-self: start; na nawigacji i usprawiedliwić się: koniec; dla przycisku do umieszczania rzeczy, ale Flexbox ułatwił rozmieszczanie odstępów w nawigacji.

 .nagłówek {
  kolumna siatki: 1 / 4;
  rząd siatki: 1 / 2;
  kolor: #9f9c9c;
  transformacja tekstu: wielkie litery;
  obramowanie na dole: pełne 2 piksele #b0e0ea;
  dopełnienie: 20 pikseli 0;
  wyświetlacz: elastyczny;
  justify-content: odstęp między;
  elementy wyrównania: środek;
} 

Ten sam format zostanie zastosowany tutaj. Logo, elementy menu i przycisk wykorzystywały treść justify Flexbox do odstępów.

Siatka zawartości kolumny

Na okazje, które wymagają ułożenia elementów w jednym kierunku, co oznacza, że ​​jest to bardziej „jednowymiarowe”, zwykle lepszą opcją jest Flexbox. Ponadto Flexbox jest dobry w dynamicznym skalowaniu elementów. Być może próbowałeś tego w rzędzie pól, dodając display:flex; na elemencie nadrzędnym i właściwości flex na elementach podrzędnych. Dzięki tej technice tworzy się ładna linia i jest to skuteczny sposób na upewnienie się, że wszystkie elementy mają tę samą wysokość.

Zawartość wiersza z tekstem i przyciskami

W sekcji „dodatkowa treść” dodano trzy obszary z tekstem i przyciskami. Flexbox ułatwia utrzymanie ustawionej szerokości dla trzech kolumn.

 dodatkowe {
  kolumna siatki: 2 / 4;
  rząd siatki: 4 / 5;
  wyściółka: 1rem;
  wyświetlacz: elastyczny;
  flex-wrap: owiń;
  obramowanie: pełne 1px #ececec;
  justify-content: odstęp między;
}

Jeden wyjątek Flexbox

Tak, powiedziałem, że Flexbox jest lepszy w przypadku jednowymiarowych układów, siatek lub kolumn, ale jeśli przeczytałeś artykuł Jak używać Flexboksa do tworzenia nowoczesnego układu kart CSS, zademonstrowano hack Flexbox „ostatniego rzędu” aby zachować równowagę wierszy i kolumn, nawet bez parzystej liczby kart.

 .powiązane obrazy {
  kolumna siatki: 1 / 3;
  rząd siatki: 5 / 6;
  wyświetlacz: siatka;
  kolumny szablonu siatki: powtórz (4,1fr);
  przerwa w siatce: 1rem;
}
.powiązane-obrazy .icon {
    kolor tła: biały;
    elastyczny: 1 1 150 pikseli;
}

Podsumowanie podejścia projektowego

Zasadniczo podejście, które tutaj zastosowałem, polegało na wykorzystaniu CSS Grid Layout do ogólnego układu (i wszystkiego, co nie było liniowe w projekcie). W obszarach zawartości siatki Flexbox został użyty do uporządkowania i dopracowania stylizacji w obszarach siatki.

Zasoby

Istnieje tak wiele wspaniałych zasobów dotyczących Flexbox i CSS Grid Layouts, zbyt wiele, by je wymienić. Oto kilka, dzięki którym zaczniesz we właściwym kierunku i zainspirujesz swoje układy.

• Arkusz wyrównywania pudełek
• Laboratorium układów Jen Simmons
• Kompletny przewodnik po sieci
• Kompletny przewodnik po Flexbox

Mamy nadzieję, że dzięki tym ćwiczeniom lepiej zrozumiałeś, jak tworzyć układy za pomocą CSS Grid Layouts i Flexbox. Co sądzisz o tych nowych technologiach? W jaki sposób pomogli ci w procesie rozwoju?