Prozkoumejte rozdíly mezi těmito moderními metodami rozvržení CSS pomocí praktického problému: seřazení sloupců.
Pokud jde o rozvržení CSS, dva hlavní nástroje, které máte k dispozici, jsou Grid a Flexbox. Zatímco oba jsou úžasní při vytváření rozvržení, slouží různým účelům a mají různé silné a slabé stránky.
Zjistěte, jak se chovají obě metody rozvržení a kdy použít jednu přes druhou.
Odlišné chování CSS Flexbox a Grid
Chcete-li si věci představit, vytvořte index.html soubor do vaší preferované složky a vložte následující označení:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="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>
<divclass="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 divy obsahují přesně stejné potomky, takže na každý můžete použít jiný systém a porovnat je.
Můžete také vidět, že HTML importuje soubor šablony stylů s názvem styl.css. Vytvořte tento soubor ve stejné složce jako index.html a vložte do něj následující styly:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Vaše stránka by měla vypadat takto:
Nyní otočit první do flex sloupce jednoduše přidejte následující kód do své šablony stylů:
.flex-container {
display: flex;
}
Toto je výsledek:
The flex-kontejner div nyní rozloží své podřízené prvky do sloupců. Tyto sloupce jsou flexibilní a reagují – přizpůsobují svou šířku podle prostoru dostupného ve výřezu. Toto chování je jedním z hlavních základní koncepty Flexboxu.
Aby se zabránilo přetékání kolon v flex-kontejner, můžete použít flex-wrap vlastnictví:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Pokud není dostatek místa pro podřízené prvky, aby se vešly na jeden řádek, zabalí se a pokračují na další.
Nyní použijte rozvržení mřížky na druhý pomocí tohoto CSS:
.grid-container {
display: grid;
}
S výše uvedenou deklarací se nic nestane, protože výchozí chování mřížky vytváří řádky, které se skládají na sebe.
Chcete-li přepnout na sloupcové zobrazení, musíte změnit mřížka-automatický tok majetek (což je řádek ve výchozím stavu):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Tady je výsledek:
Chcete-li zadat přesný počet sloupců, které chcete na každém řádku, použijte mřížka-šablona-sloupce:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Tato hodnota vytvoří pět sloupců stejné šířky. Chcete-li získat chování zalamování podobné Flexboxu, můžete použít responzivní vlastnosti jako automatické přizpůsobení a min-max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Často uslyšíte, jak jsou Flexbox a Grid označovány jako jednorozměrné a dvourozměrné. To však není úplná pravda, protože Flexbox i Grid mohou dvourozměrný systém rozložení. Prostě to dělají různými způsoby, s různými omezeními.
Nejdůležitější je způsob, jakým můžete ovládat jednorozměrný aspekt rozvržení. Zvažte například následující obrázek:
Sledujte, jak konzistentní je sloupec Grid a jak nerovnoměrný je každý sloupec ve Flexboxu. Každý řádek/sloupec v flex kontejneru je nezávislý na druhém. Některé tedy mohou být větší než jiné, v závislosti na velikosti jejich obsahu. Jsou to méně jako sloupce a více jako nezávislé bloky.
Mřížka funguje odlišně nastavením 2D mřížky se sloupci ve výchozím nastavení uzamčenými. Sloupec s krátkým textem bude mít stejnou velikost jako sloupec s mnohem delším textem, jak ukazuje obrázek výše.
Stručně řečeno, CSS Grid je trochu strukturovanější, zatímco Flexbox je více flexibilní a citlivý systém rozvržení. Tyto alternativní systémy uspořádání jsou dobře pojmenované!
Kdy použít Flexbox
Chcete se spolehnout na vnitřní velikost každého sloupce/řádku, jak je definována jejich obsahem? Nebo chcete mít strukturovanou kontrolu z pohledu rodiče? Pokud je vaše odpověď první, pak je pro vás Flexbox dokonalým řešením.
Chcete-li to demonstrovat, zvažte horizontální navigační nabídku. Nahraďte označení v rámci tagy s tímto:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Nahraďte označení v souboru CSS tímto:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Zde je výsledek:
Nyní transformujte první navigaci na flexibilní rozvržení a druhou na rozvržení mřížky přidáním následujícího CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Porovnejte výsledky a zjistěte, který byl vhodnější:
Z obrázku výše můžete vidět, že Flexbox je v tomto případě perfektní řešení. Máte položky, které chcete umístit vedle sebe a zachovat jejich vnitřní velikost (velkou nebo malou v závislosti na délce textu). S mřížkou má každá buňka pevnou šířku a nevypadá to tak dobře – alespoň s odkazy na prostý text.
Kdy použít mřížku CSS
Jedním z míst, kde Grid opravdu vyniká, je situace, kdy chcete vytvořit pevný systém z rodiče. Příkladem je sada prvků karet, které by měly být stejně široké, i když obsahují různé množství obsahu.
Nahraďte označení uvnitř tagy s tímto:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Přidejte tento CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Začínáte s displejem Flexbox, abyste viděli, jak vypadá, abyste jej mohli porovnat s mřížkovým displejem. Zde je výstup:
Všimněte si, jak je poslední sloupec větší než ostatní kvůli jeho vnitřní velikosti, což Flexbox zvládá dobře. Ale aby měly stejnou šířku pomocí Flexboxu, museli byste jít proti této vnitřní velikosti přidáním následujícího:
.columns > * {
flex: 1;
}
Tohle dělá ten trik. Ale Grid je pro takové případy vhodnější. Stačí zadat počet sloupců a můžete začít:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Zde je výsledek:
Další výhodou použití mřížky je, že rozvržení dětí řídí rodič. Můžete tedy přidávat a odebírat podřízené prvky, aniž byste se museli obávat porušení rozvržení.
Kdy byste tedy měli použít Grid nebo Flexbox?
Stručně řečeno, CSS Grid je skvělý, když chcete strukturovaný ovládací prvek z pohledu rodiče se stejnou velikostí sloupců bez ohledu na velikost jeho jednotlivého obsahu.
Flexbox je na druhou stranu ideální, když chcete flexibilnější systém založený na vnitřním dimenzování prvků.
