Istražite razlike između ovih modernih metoda CSS rasporeda s praktičnim problemom: poredanjem stupaca.
Kada su u pitanju CSS izgledi, dva glavna alata koja su vam na raspolaganju su Grid i Flexbox. Iako su oba sjajna u stvaranju izgleda, služe različitim svrhama i imaju različite snage i slabosti.
Saznajte kako se ponašaju obje metode izgleda i kada koristiti jednu umjesto druge.
Različito ponašanje CSS Flexboxa i Grida
Kako biste lakše vizualizirali stvari, stvorite index.html datoteku u željenu mapu i zalijepite sljedeću oznaku:
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 diva sadrže potpuno istu djecu tako da možete primijeniti drugačiji sustav na svaki i usporediti ih.
Također možete vidjeti da HTML uvozi datoteku lista stilova pod nazivom stil.css. Stvorite ovu datoteku u istoj mapi kao index.html i u njega zalijepite sljedeće stilove:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Vaša bi stranica trebala izgledati ovako:
Sada, da okrenem prvi u fleksibilni stupac, jednostavno dodajte sljedeći kod svojoj tablici stilova:
.flex-container {
display: flex;
}
Ovo je rezultat:
The flex-kontejner div sada postavlja svoje podređene elemente u stupce. Ovi su stupci fleksibilni i osjetljivi — prilagođavaju svoju širinu na temelju dostupnog prostora u okviru za prikaz. Ovo ponašanje je jedno od glavnih osnovni koncepti iza Flexboxa.
Kako biste spriječili prekoračenje stupaca u flex-kontejner, možete koristiti flex-wrap svojstvo:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ako nema dovoljno mjesta da podređeni elementi stanu u jednu liniju, oni će se sada omotati i nastaviti na sljedećoj.
Sada primijenite raspored mreže na drugi koristeći ovaj CSS:
.grid-container {
display: grid;
}
Ništa se neće dogoditi samo s gornjom deklaracijom jer zadano ponašanje Grida stvara retke koji se slažu jedan na drugi.
Da biste se prebacili na prikaz stupaca, morate promijeniti grid-auto-flow vlasništvo (što je red prema zadanim postavkama):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Sada evo rezultata:
Da biste odredili točan broj stupaca koje želite u svakom retku, koristite rešetka-predložak-stupci:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ova vrijednost stvara pet stupaca jednake širine. Da biste dobili ponašanje omatanja slično Flexboxu, možete koristiti responzivna svojstva kao što su auto-fit i min-maks:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Često ćete čuti da se Flexbox i Grid nazivaju jednodimenzionalnim odnosno dvodimenzionalnim. Međutim, to nije potpuna istina jer i Flexbox i Grid mogu napraviti dvodimenzionalni sustav rasporeda. Oni to samo rade na različite načine, s različitim ograničenjima.
Ono što je najvažnije je način na koji možete kontrolirati jednodimenzionalni aspekt izgleda. Razmotrite, na primjer, sljedeću sliku:
Promatrajte koliko je dosljedan stupac Grid i koliko je svaki stupac u Flexboxu neujednačen. Svaki redak/stupac u fleksibilnom spremniku neovisan je jedan o drugom. Dakle, neki mogu biti veći od drugih, ovisno o veličini njihovog sadržaja. Oni su manje nalik stupcima, a više nezavisnim blokovima.
Mreža funkcionira drugačije, postavljanjem 2D mreže sa stupcima zaključanim prema zadanim postavkama. Stupac s kratkim tekstom bit će iste veličine kao onaj s mnogo dužim tekstom, kao što pokazuje gornja slika.
Ukratko, CSS Grid je malo strukturiraniji, dok je Flexbox više fleksibilan i responzivan sustav izgleda. Ovi alternativni sustavi izgleda dobro su nazvani!
Kada koristiti Flexbox
Želite li se osloniti na intrinzičnu veličinu svakog stupca/retka, kako je definirano njihovim sadržajem? Ili želite imati strukturiranu kontrolu iz perspektive roditelja? Ako je vaš odgovor prvi, onda je Flexbox savršeno rješenje za vas.
Da biste to demonstrirali, razmotrite horizontalni navigacijski izbornik. Zamijenite oznaku unutar oznake s ovim:
<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>
Zamijenite oznake u CSS datoteci ovime:
.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;
}
Evo rezultata:
Sada transformirajte prvu navigaciju u flex layout, a drugu u grid layout dodavanjem sljedećeg CSS-a:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Usporedite rezultate kako biste vidjeli što je prikladnije:
Iz gornje slike možete vidjeti da je Flexbox savršeno rješenje u ovom slučaju. Imate stavke za koje želite da idu jedna pored druge i da zadrže svoju intrinzičnu veličinu (velike ili male, ovisno o duljini teksta). Uz Grid, svaka ćelija ima fiksnu širinu, a to ne izgleda tako dobro - barem s vezama s običnim tekstom.
Kada koristiti CSS Grid
Jedno mjesto gdje Grid zaista briljira je kada želite stvoriti kruti sustav od nadređenog. Primjer je skup elemenata kartice koji bi trebali biti jednako široki, čak i ako sadrže različite količine sadržaja.
Zamijenite oznaku unutar oznake s ovim:
<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>
Dodajte ovaj CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Počinjete s Flexbox zaslonom da vidite kako izgleda, tako da ga možete usporediti s rešetkastim zaslonom. Evo rezultata:
Primijetite kako je posljednji stupac veći od ostalih zbog svoje intrinzične veličine, s čime Flexbox dobro podnosi. Ali da biste ih napravili iste širine pomoću Flexboxa, morali biste ići protiv te intrinzične veličine dodavanjem sljedećeg:
.columns > * {
flex: 1;
}
Ovo je trik. Ali Grid je prikladniji za ovakve slučajeve. Samo odredite broj stupaca i spremni ste:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Evo rezultata:
Još jedna prednost korištenja Grida je ta što roditelj kontrolira raspored djece. Tako možete dodavati i uklanjati podređene elemente bez brige o narušavanju izgleda.
Dakle, kada biste trebali koristiti Grid ili Flexbox?
Ukratko, CSS Grid je izvrstan kada želite strukturiranu kontrolu iz perspektive roditelja, s jednakom veličinom stupaca bez obzira na veličinu pojedinačnog sadržaja.
Flexbox je, s druge strane, idealan kada želite fleksibilniji sustav temeljen na svojstvenoj veličini elemenata.
