CSS Grid

CSS mrežni raspored ili CSS mreža lakše i doslednije kreira složene responzivne rasporede mreže veb dizajna u svim pregledačima.^[1] Istorijski gledano, postojale su i druge metode za kontrolu metoda rasporeda veb stranica, kao što su tabele, plutajući elementi i u skorije vreme, Flexbox. CSS mreža trenutno nije zvanični standard (to je W3C preporuka kandidata), iako su je usvojile novije verzije svih trenutnih glavnih pregledača.^[2]

CSS mreža može da kreira robusnije i fleksibilnije rasporede od prethodnih opcija poput plutajućih elemenata. Takođe omogućava standardizovaniji kod koji radi u različitim pregledačima. Ovo je suprotno oslanjanju na specifične hakove za pregledače ili komplikovana rešenja.^[3]

Jedan problem sa iskorišćavanjem plutajućih elemenata u CSS-u je taj što ako se sadržaj doda jednom delu stranice, to može poremetiti tok i narušiti raspored. To je zbog različitih visina elemenata rasporeda.^[3] Iako Flexbox podržava fleksibilne rasporede i pruža fleksibilnost kreiranja složenih rasporeda, on ne uspeva kada se pojavi potreba za kreiranjem responzivnih rasporeda u dvodimenzionalnom prostoru.

Prvi sveobuhvatni nacrt rasporeda mreže za CSS kreirali su Fil Kap, Markus Milke i Aleks Mogilevski u Microsoft-u 2011. i implementirali su ga u Internet Explorer 10 iza prefiksa -ms- vendor. Sintaksa je restrukturirana i dalje usavršena kroz nekoliko iteracija u CSS radnoj grupi, koju su prvenstveno vodili Elika Etemad i Tab Atkins mlađi. Funkciju su široko usvojili veb programeri nakon evangelizma koji su prvenstveno predvodili Rejčel Endru i Džen Simons.^[4]

Od oktobra 2017, Chrome, Firefox, Safari i Edge podržavaju CSS mrežu bez prefiksa proizvođača. IE 10 i 11 podržavaju CSS mrežu, ali sa zastarelom specifikacijom. Na mobilnim uređajima, svi moderni pregledači podržavaju CSS mrežu osim Opera Mini.^[5] Veb programeri koji ciljaju starije pregledače mogu koristiti Modernizr 3.5.0 za otkrivanje i graciozno degradiranje veb stranice po potrebi.^[6]

Tailwind uključuje CSS mrežu u svoje alate za kontrolu veličine i postavljanja elemenata.^[1] Međutim, mnogi drugi trenutni veb frejmvorci ne uključuju CSS mrežu, kao što su Bootstrap 4 i 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>

Izlaz

Sledi primer tabele vrednosti:

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>

Izlaz

• CSS Grid Layout modul nivoa 1
• Generator CSS mreže Tailwind