CSS Grid czy Flexbox: Co jest lepsze do tworzenia kolumn?
Jeśli chodzi o układy CSS, dwa główne narzędzia do dyspozycji to Grid i Flexbox. Chociaż oba są świetne w tworzeniu układów, służą różnym celom i mają różne mocne i słabe strony.
Zdobądź wiedzę na temat różnych zachowań wykazywanych przez każdą metodę układu, a także okoliczności, w których należy je stosować.
Różne zachowania CSS Flexbox i Grid
Wyżej wymieniony proces można skutecznie przekazać, generując plik index.html w wybranym katalogu i włączając do niego poniższy fragment kodu:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="flex-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
<h2>Grid:</h2>
<div class="grid-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>
Oba działy obejmują identyczne potomstwo, co pozwala na wdrożenie różnych metodologii w każdym z nich i ułatwia ich porównanie.
Można zauważyć, że HTML zawiera stylizowany dokument tekstowy o nazwie “style.css”. Skonstruuj ten konkretny plik w identycznym katalogu jak “index.html” i wstaw do niego kolejne projekty:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
Twoja strona powinna wyglądać następująco:
Aby przekształcić początkowy element div w elastyczną kolumnę w pliku CSS, wystarczy włączyć dostarczone znaczniki do arkusza stylów. Spowoduje to skuteczną zmianę układu pierwszego elementu div poprzez wykorzystanie właściwości i atrybutów związanych z właściwościami display i flex CSS.
.flex-container {
display: flex;
}
Oto wynik:
Kontener flex wykorzystuje strategię układu znaną jako flexbox, która układa jego elementy podrzędne w poziomych rzędach lub kolumnach, które mogą dynamicznie dostosowywać się do wymiarów obszaru wyświetlania. Ta zdolność do zmiany rozmiaru ma fundamentalne znaczenie dla zrozumienia zasad flexbox, co stanowi podstawę jego użyteczności w projektowaniu stron internetowych.
Aby złagodzić potencjalne problemy z przepełnieniem kolumn w elastycznym kontenerze, zaleca się użycie właściwości flex-wrap .
.flex-container {
display: flex;
flex-wrap: wrap;
}
Nowa właściwość CSS flexbox pozwala na bardziej efektywne wykorzystanie przestrzeni, umożliwiając elementom podrzędnym przepływ do wielu linii, gdy jest to konieczne, zamiast powodować ich przepełnienie lub obcięcie, jak w poprzednich wersjach. Osiąga się to poprzez implementację elastycznego kontenera z dostępną wolną przestrzenią obliczoną na podstawie jego rozmiaru, która może być następnie rozdzielona między jego elementy podrzędne zgodnie z ich odpowiednimi rozmiarami i priorytetami ustawionymi za pomocą właściwości “flex-grow”, “flex-shrink” i “flex-basis”.Pozwalając tym elementom podrzędnym na zawijanie się i kontynuowanie w kolejnych wierszach, gdy dostępna przestrzeń staje się niewystarczająca, aby wszystkie z nich pojawiły się w jednym wierszu, funkcja ta pomaga zoptymalizować układy i uniknąć potencjalnych problemów projektowych, które mogą wynikać z ograniczeń stałej szerokości.
Aby uzyskać układ oparty na siatce dla drugiego elementu , można wykorzystać następujące reguły CSS:css.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;} Reguła display: grid; stosuje model układu “grid” do klasy .grid , pozwalając nam zdefiniować w niej wiersze i kolumny. Właściwość grid-template-columns określa, że chcemy utworzyć automatycznie wypełnianą siatkę o minimalnej szerokości 200 pikseli i maksymalnej szerokości 1 ułamka (co oznacza, że każda kolumna zajmuje tyle miejsca, ile potrzeba). Wreszcie, właściwość grid-gap
.grid-container {
display: grid;
}
Powyższe stwierdzenie samo w sobie nie daje żadnego efektu, ponieważ standardowe działanie siatki powoduje, że jej elementy składowe są domyślnie ułożone pionowo jeden na drugim.
Aby przejść z układu wierszowego na kolumnowy, należy zmodyfikować wartość właściwości grid-auto-flow , która domyślnie wynosi row . Zmieniając tę właściwość na kolumna , elementy siatki będą wyświetlane w pionowych kolumnach zamiast w poziomych rzędach.
.grid-container {
display: grid;
grid-auto-flow: column;
}
Oto wynik:
Aby precyzyjnie określić żądaną liczbę kolumn na wiersz w układzie siatki, należy wykorzystać właściwość “grid-template-columns” w CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Aby uzyskać układ z wieloma kolumnami o równej szerokości, który zachowuje się podobnie do Flexbox, jeśli chodzi o zawijanie treści, można wykorzystać właściwości responsywnego projektu, takie jak “auto-fit”, “min-content” i “max-content”.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox i Grid są czasami charakteryzowane jako odpowiednio jednowymiarowe i dwuwymiarowe systemy układów; jednak ta klasyfikacja jest nadmiernym uproszczeniem, ponieważ zarówno Flexbox, jak i Grid mają możliwość tworzenia dwuwymiarowych układów pomimo różnic w podejściu i ograniczeniach.
Rzeczywiście, regulacja pojedynczej wymiarowości układu jest najważniejsza. Weźmy na przykład pod uwagę wspomnianą wcześniej ilustrację:
Rzeczywiście, spójność kolumny Grid jest godna uwagi w porównaniu do zmienności obserwowanej w wierszach/kolumnach Flexbox.Ważne jest, aby pamiętać, że każdy pojedynczy wiersz/kolumna w elastycznym kontenerze działa niezależnie od siebie, co powoduje potencjalne rozbieżności w rozmiarze w zależności od zawartości, którą zawierają. W rezultacie elementy te mogą być postrzegane jako odrębne bloki, a nie tradycyjne kolumny.
Siatka działa inaczej, tworząc dwuwymiarową tablicę, w której kolumny są wstępnie ustawione tak, aby pozostały stałe. Na przykład element zawierający zwięzłą treść powinien wykazywać zgodne wymiary z innym zawierającym obszerny tekst, jak pokazano na załączonej ilustracji.
Zasadniczo CSS Grid zapewnia bardziej zorganizowane podejście do projektowania układów w porównaniu do flexbox, który oferuje większą zdolność adaptacji i responsywność w tworzeniu dynamicznych interfejsów użytkownika. Nazwy tych dwóch znanych systemów układów nie mogą być bardziej odpowiednie.
Kiedy używać Flexbox
Czy wolisz wykorzystać nieodłączne wymiary poszczególnych kolumn i wierszy w oparciu o ich zawartość, czy też sprawować nad nimi uporządkowaną kontrolę z punktu widzenia elementu nadrzędnego? Jeśli zdecydujesz się na to pierwsze, Flexbox stanowi idealne rozwiązanie.
Aby zilustrować tę koncepcję, przeanalizujmy hipotetyczny scenariusz, w którym mamy poziomo wyrównany pasek nawigacyjny umieszczony w otwierającym i zamykającym znaczniku HTML . Zaktualizowany kod wyglądałby następująco:
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
Zmodyfikuj zawartość w kaskadowym arkuszu stylów, wykorzystując dostarczony fragment kodu jako zamiennik istniejących znaczników.
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
margin-bottom: 30px;
}
header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid #90EE90;
}
Oto wynik:
Aby utworzyć elastyczną nawigację z pierwszymi elementami menu ułożonymi pionowo na mniejszych ekranach i wyświetlanymi jako dwie kolumny o równej szerokości na większych ekranach przy użyciu CSS Grid, dodaj następujący kod do arkusza stylów:css/* Małe ekrany // Większe ekrany */And for the second menu item in a list style, you can use the same
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Determine the efficacy of each approach by comparing their outcomes:
Indeed, the visual representation illustrates how Flexbox caters to the requirement of aligning elements side by side while preserving their natural dimensions. I odwrotnie, Grid, ze swoim z góry określonym rozmiarem komórki, może nie zapewniać optymalnego wyglądu, gdy jest stosowany do zwykłych linków tekstowych.
Kiedy używać CSS Grid
Grid oferuje wyraźną przewagę w sytuacjach, w których pożądana jest stała struktura dla elementów podrzędnych w ich kontenerze nadrzędnym.Na przykład, układanie serii kart o jednolitej szerokości, niezależnie od ich różnych rozmiarów zawartości, można skutecznie osiągnąć za pomocą Grid.
Zastąp znaczniki w tagach dostarczonym fragmentem kodu, który zawiera szereg instrukcji dotyczących tworzenia i stylizowania stron internetowych za pomocą HTML i CSS.
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
</div>
</section>
Dodaj ten CSS:
.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Początkowa demonstracja wykorzystuje układ Flexbox do wizualnego porównania z układem Grid. Wyświetlany wynik jest następujący:
Rzeczywiście, warto zauważyć, że ostatnia kolumna wykazuje większy rozmiar ze względu na swoje nieodłączne wymiary, którymi skutecznie zarządza układ Flexbox. Aby jednak wyrenderować wszystkie kolumny o jednakowej szerokości przy użyciu Flexbox, należy zastąpić ten nieodłączny pomiar, stosując następującą metodologię:
.columns > * {
flex: 1;
}
Układy siatki są skutecznym rozwiązaniem, gdy wymagany jest określony układ elementów. Określając liczbę kolumn, można łatwo osiągnąć pożądane wyrównanie bez konieczności stosowania złożonych stylów CSS lub manipulacji JavaScript.
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Oto wynik:
Wykorzystanie siatki w ten sposób przynosi dodatkową korzyść, ponieważ umożliwia rodzicom zachowanie kontroli nad układem ich dzieci. Oznacza to, że nowe lub usunięte elementy podrzędne nie zakłócą ogólnej struktury.
Więc kiedy powinieneś użyć Grid lub Flexbox?
Zaawansowana wersja angielska:Układ siatki oferuje dobrze zorganizowaną strukturę dla elementu nadrzędnego, zapewniając spójne szerokości kolumn, które pozostają jednolite dla różnych rozmiarów treści.
Flexbox oferuje adaptowalny układ, który opiera się na nieodłącznych wymiarach jego komponentów, dzięki czemu dobrze nadaje się do sytuacji, w których elastyczność i szybkość reakcji są najważniejsze.