Истражите разлике између ових савремених метода ЦСС распореда са практичним проблемом: поређањем колона.
Када су у питању ЦСС распореди, два главна алата која су вам на располагању су Грид и Флекбок. Иако су оба сјајна у креирању изгледа, они служе различитим сврхама и имају различите предности и слабости.
Научите како се понашају обе методе распореда и када да користите једну преко друге.
Различито понашање ЦСС Флекбок-а и Грид-а
Да бисте помогли у визуелизацији ствари, креирајте индек.хтмл датотеку у жељену фасциклу и налепите следеће ознаке:
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>
Оба див-а садрже потпуно исту децу тако да можете применити другачији систем на сваки и упоредити их.
Такође можете видети да ХТМЛ увози датотеку са стилским листама под називом стиле.цсс. Креирајте ову датотеку у истој фасцикли као индек.хтмл и налепите следеће стилове у њега:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Ваша страница би требало да изгледа овако:
Сада, да окренем прву у флекс колону, једноставно додајте следећи код у свој стилски лист:
.flex-container {
display: flex;
}
Ово је резултат:
Тхе флек-цонтаинер див сада поставља своје подређене елементе у колоне. Ове колоне су флексибилне и прилагодљиве - прилагођавају своју ширину на основу простора доступног у оквиру за приказ. Ово понашање је једно од главних основни концепти који стоје иза Флекбок-а.
Да бисте спречили преливање колона у флек-цонтаинер, можете користити флек-врап имовина:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ако нема довољно простора за подређене елементе да стану на једну линију, они ће се сада умотати и наставити на следећој.
Сада примените распоред мреже на други користећи овај ЦСС:
.grid-container {
display: grid;
}
Ништа се неће догодити само са горњом декларацијом јер подразумевано понашање Грид-а ствара редове који се наслажу један на други.
Да бисте прешли на приказ колона, потребно је да промените грид-ауто-флов имовине (што је ред подразумевано):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Ево резултата:
Да бисте одредили тачан број колона који желите у свакој линији, користите грид-темплате-колумнс:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Ова вредност ствара пет колона једнаке ширине. Да бисте добили понашање премотавања слично Флекбок-у, можете користити својства одзива као што су ауто-фит и мин-макс:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Често ћете чути како се Флекбок и Грид називају једнодимензионалним и дводимензионалним. То, међутим, није пуна истина, јер и Флекбок и Грид могу да направе а дводимензионални систем распореда. Они то раде на различите начине, са различитим ограничењима.
Оно што је најважније је начин на који можете да контролишете једнодимензионални аспект изгледа. Размотрите следећу слику, на пример:
Посматрајте колико је конзистентна колона Грид и колико је свака колона у Флекбок-у неуједначена. Сваки ред/колона у флекс контејнеру је независан од другог. Дакле, неки могу бити већи од других, у зависности од величине њиховог садржаја. Ово су мање као колоне, а више као независни блокови.
Мрежа функционише другачије, постављањем 2Д мреже са колонама које су подразумевано закључане. Колона са кратким текстом ће бити исте величине као колона са много дужим текстом, као што показује горња слика.
Укратко, ЦСС Грид је мало више структуриран, док је Флекбок више флексибилан и прилагодљив систем распореда. Ови алтернативни системи распореда су добро названи!
Када користити Флекбок
Да ли желите да се ослоните на суштинску величину сваке колоне/реда, како је дефинисано њиховим садржајем? Или желите да имате структурирану контролу из перспективе родитеља? Ако је ваш одговор први, онда је Флекбок савршено решење за вас.
Да бисте то показали, размотрите хоризонтални мени за навигацију. Замените ознаку унутар ознаке са овим:
<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>
Замените ознаке у ЦСС датотеци са овим:
.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;
}
Ево резултата:
Сада трансформишите прву навигацију у флексибилни изглед, а другу у распоред мреже додавањем следећег ЦСС-а:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Упоредите резултате да видите који је прикладнији:
Са горње слике можете видети да је Флекбок савршено решење у овом случају. Имате ставке које желите да ставите један поред другог и задржите њихову унутрашњу величину (велике или мале у зависности од дужине текста). Са Грид-ом, свака ћелија има фиксну ширину и не изгледа тако добро – барем са везама за обичан текст.
Када користити ЦСС Грид
Једно место где се Грид заиста истиче је када желите да креирате крути систем од родитеља. Пример је скуп елемената картице који треба да буду подједнако широки, чак и ако садрже различите количине садржаја.
Замените ознаку унутар ознаке са овим:
<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>
Додајте овај ЦСС:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Почињете са Флекбок дисплејом да бисте видели како изгледа, тако да можете да га упоредите са приказом мреже. Ево излаза:
Обратите пажњу на то како је последња колона већа од осталих због своје унутрашње величине, чиме се Флекбок добро носи. Али да бисте их учинили исте ширине користећи Флекбок, морали бисте да идете против те унутрашње величине додавањем следећег:
.columns > * {
flex: 1;
}
Ово ради трик. Али Грид је погоднији за овакве случајеве. Само наведете број колона и спремни сте:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Ево резултата:
Још једна предност коришћења Грид-а је да родитељ контролише распоред деце. Тако можете да додајете и уклањате подређене елементе без бриге да ћете покварити изглед.
Дакле, када треба да користите Грид или Флекбок?
Укратко, ЦСС Грид је одличан када желите структурирану контролу из перспективе родитеља, са једнаком величином колона без обзира на величину њеног појединачног садржаја.
Флекбок је, с друге стране, идеалан када желите флексибилнији систем заснован на интринзичној величини елемената.