мини|Пример CSS мреже CSS мрежни распоред или CSS мрежа лакше и доследније креира сложене респонзивне распореде мреже веб дизајна у свим прегледачима. Историјски гледано, постојале су и друге методе за контролу метода распореда веб страница, као што су табеле, плутајући елементи и у скорије време, Flexbox. CSS мрежа тренутно није званични стандард (то је W3C препорука кандидата), иако су је усвојиле новије верзије свих тренутних главних прегледача.

Мотивација CSS мрежа може да креира робусније и флексибилније распореде од претходних опција попут плутајућих елемената. Такође омогућава стандардизованији код који ради у различитим прегледачима. Ово је супротно ослањању на специфичне хакове за прегледаче или компликована решења.

Један проблем са искоришћавањем плутајућих елемената у CSS-у је тај што ако се садржај дода једном делу странице, то може пореметити ток и нарушити распоред. То је због различитих висина елемената распореда. Иако Flexbox подржава флексибилне распореде и пружа флексибилност креирања сложених распореда, он не успева када се појави потреба за креирањем респонзивних распореда у дводимензионалном простору.

Историја Први свеобухватни нацрт распореда мреже за CSS креирали су Фил Кап, Маркус Милке и Алекс Могилевски у Microsoft-у 2011. и имплементирали су га у Internet Explorer 10 иза префикса -ms- vendor. Синтакса је реструктурирана и даље усавршена кроз неколико итерација у CSS радној групи, коју су првенствено водили Елика Етемад и Таб Аткинс млађи. Функцију су широко усвојили веб програмери након евангелизма који су првенствено предводили Рејчел Ендру и Џен Симонс.

Подршка за прегледаче Од октобра 2017, Chrome, Firefox, Safari и Edge подржавају CSS мрежу без префикса произвођача. IE 10 и 11 подржавају CSS мрежу, али са застарелом спецификацијом. На мобилним уређајима, сви модерни прегледачи подржавају CSS мрежу осим Opera Mini. Веб програмери који циљају старије прегледаче могу користити Modernizr 3.5.0 за откривање и грациозно деградирање веб странице по потреби.

Употреба у фрејмворковима Tailwind укључује CSS мрежу у своје алате за контролу величине и постављања елемената. Међутим, многи други тренутни веб фрејмворци не укључују CSS мрежу, као што су Bootstrap 4 и Foundation 6.

Примери

Распоред „Свети грал“ 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>ИзлазCSS Grid Holy Grail Layout

Табела вредности Следи пример табеле вредности: 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>ИзлазA simple implementation of the CSS Grid layout demonstrating a table layout

Референце

Спољашње везе

CSS Grid Layout модул нивоа 1 Генератор CSS мреже Tailwind

Категорија:Веб-дизајн Категорија:W3C Standardi