CSS Grid
| Каскадне стилске таблице |
|---|
| Поређење |
| Веб дизајн |
CSS мрежни распоред или CSS мрежа лакше и доследније креира сложене респонзивне распореде мреже веб дизајна у свим прегледачима.[1] Историјски гледано, постојале су и друге методе за контролу метода распореда веб страница, као што су табеле, плутајући елементи и у скорије време, Flexbox. CSS мрежа тренутно није званични стандард (то је W3C препорука кандидата), иако су је усвојиле новије верзије свих тренутних главних прегледача.[2]
Мотивација
[уреди | уреди извор]CSS мрежа може да креира робусније и флексибилније распореде од претходних опција попут плутајућих елемената. Такође омогућава стандардизованији код који ради у различитим прегледачима. Ово је супротно ослањању на специфичне хакове за прегледаче или компликована решења.[3]
Један проблем са искоришћавањем плутајућих елемената у CSS-у је тај што ако се садржај дода једном делу странице, то може пореметити ток и нарушити распоред. То је због различитих висина елемената распореда.[3] Иако Flexbox подржава флексибилне распореде и пружа флексибилност креирања сложених распореда, он не успева када се појави потреба за креирањем респонзивних распореда у дводимензионалном простору.
Историја
[уреди | уреди извор]Први свеобухватни нацрт распореда мреже за CSS креирали су Фил Кап, Маркус Милке и Алекс Могилевски у Microsoft-у 2011. и имплементирали су га у Internet Explorer 10 иза префикса -ms- vendor. Синтакса је реструктурирана и даље усавршена кроз неколико итерација у CSS радној групи, коју су првенствено водили Елика Етемад и Таб Аткинс млађи. Функцију су широко усвојили веб програмери након евангелизма који су првенствено предводили Рејчел Ендру и Џен Симонс.[4]
Подршка за прегледаче
[уреди | уреди извор]Од октобра 2017, Chrome, Firefox, Safari и Edge подржавају CSS мрежу без префикса произвођача. IE 10 и 11 подржавају CSS мрежу, али са застарелом спецификацијом. На мобилним уређајима, сви модерни прегледачи подржавају CSS мрежу осим Opera Mini.[5] Веб програмери који циљају старије прегледаче могу користити Modernizr 3.5.0 за откривање и грациозно деградирање веб странице по потреби.[6]
Употреба у фрејмворковима
[уреди | уреди извор]Tailwind укључује CSS мрежу у своје алате за контролу величине и постављања елемената.[1] Међутим, многи други тренутни веб фрејмворци не укључују CSS мрежу, као што су Bootstrap 4 и Foundation 6. [2]
Примери
[уреди | уреди извор]Распоред „Свети грал“
[уреди | уреди извор]| HTML | <html>
<style>
div { border: 1px solid; }
body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-areas:
"header header header"
"left middle right"
"footer footer footer";
}
</style>
<body>
<div style="grid-area: header">The header</div>
<div style="grid-area: footer">The footer</div>
<div style="grid-area: left">The left panel</div>
<div style="grid-area: middle; height: 200px">The main content area</div>
<div style="grid-area: right">The right panel</div>
</body>
</html>
|
|---|---|
| Излаз | 
|
Табела вредности
[уреди | уреди извор]Следи пример табеле вредности:
| HTML | <html>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
div {
border: 1px solid;
}
</style>
<body>
<div class="wrapper">
<h3>Header1</h3><h3>Header2</h3><h3>Header3</h3>
<div>value11</div><div>value12</div><div>value13</div>
<div>value21</div><div>value22</div><div>value23</div>
<div>value31</div><div>value32</div><div>value33</div>
<div>value41</div><div>value42</div><div>value43</div>
<div>value51</div><div>value52</div><div>value53</div>
<div>value61</div><div>value62</div><div>value63</div>
<div>value71</div><div>value72</div><div>value73</div>
</div>
</body>
</html>
|
|---|---|
| Излаз | 
|
Референце
[уреди | уреди извор]- ^ а б „CSS Grid – Table layout is back. Be there and be square.”. Google Developers. јануар 2017. Приступљено 2021-04-09.
- ^ а б „CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc”. caniuse.com. Приступљено 2022-01-12.
- ^ а б „CSS Grid Layout Module Level 1”. www.w3.org. Приступљено 2026-02-07.
- ^ Gustafson, Aaron (2017-10-19). „The Story of CSS Grid, from Its Creators”. A List Apart (на језику: енглески). Приступљено 2026-02-07.
- ^ „"grid" | Can I use... Support tables for HTML5, CSS3, etc”.
- ^ Ateş, Faruk (2017-04-13). „Modernizr 3.5.0”. Modernizr News. Приступљено 2021-04-09.
