CSS Grid

Каскадне стилске таблице
Поређење
Веб дизајн
Пример CSS мреже

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>
Излаз 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

Референце

  1. ^ а б „CSS Grid – Table layout is back. Be there and be square.”. Google Developers. јануар 2017. Приступљено 2021-04-09. 
  2. ^ а б Can I use... Support tables for HTML5, CSS3, etc”. caniuse.com. Приступљено 2022-01-12. 
  3. ^ а б „CSS Grid Layout Module Level 1”. www.w3.org. Приступљено 2026-02-07. 
  4. ^ Gustafson, Aaron (2017-10-19). „The Story of CSS Grid, from Its Creators”. A List Apart (на језику: енглески). Приступљено 2026-02-07. 
  5. ^ „"grid" | Can I use... Support tables for HTML5, CSS3, etc”. 
  6. ^ Ateş, Faruk (2017-04-13). „Modernizr 3.5.0”. Modernizr News. Приступљено 2021-04-09. 

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

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.