CSS gitterlayout - CSS grid layout
| CSS Grid Layout Module Niveau 1 | |
 En skildring af et typisk websideslayout ved hjælp af CSS-floats .
| |
| Indfødt navn | CSS Grid Layout Module Niveau 1 |
|---|---|
| Status | W3C Udkast til kandidatanbefaling |
| Først offentliggjort | 7. april 2007 |
| Nyeste version | Niveau 1 18. december 2020 |
| Eksempelversion | Niveau 2 11. marts 2021 |
| Organisation | W3C |
| Komité | CSS-arbejdsgruppe |
| Redaktører | |
| Grundlæggende standarder | CSS |
| Domæne | CSS |
| Forkortelse | Gitter, gitterlayout |
| Internet side | www |
| Cascading Style Sheets |
|---|
| Begreber |
| Filosofier |
| Værktøjer |
| Sammenligninger |
I Cascading Style Sheets , CSS gitter layout eller CSS gitter skaber komplekse responsive webdesign layout lettere og konsekvent på tværs af browsere. Der har været andre metoder til styring af websides layoutmetoder, såsom tabeller , boksmodellen og CSS flex-boksen . CSS-gitter er i øjeblikket ikke en officiel standard (det er en W3C-kandidatanbefaling ), selvom det er blevet vedtaget af de fleste større browsere.
Motivering
CSS-gitter kan oprette flere asymmetriske layouts end de tidligere gitter- og layoutmuligheder som CSS-floats . Det giver også mulighed for mere standardkode, der fungerer på tværs af browsere. Dette er i modsætning til at stole på specifikke browserhacks eller komplicerede løsninger.
Et problem med at udnytte floats i CSS er, at hvis indholdet føjes til en del af siden, kan det forstyrre sidestrømmen og bryde layoutet. Dette skyldes de forskellige højder for layoutelementer. Selvom CSS flex-boksen understøtter fleksible layouts og giver fleksibiliteten ved at oprette komplekse layouts, mislykkes den, når behovet for at oprette responsive layouts i 2-dimensionelt rum opstår.
Browsersupport
Fra oktober 2017 understøtter Chrome, Firefox, Safari og Edge alle CSS-gitter uden leverandørpræfikser. IE 10 og 11 understøtter CSS-gitter, men med en forældet specifikation. På mobil understøtter alle moderne browsere CSS-gitter undtagen Opera Mini og modig browser. Webudviklere, der er målrettet mod ældre browsere, kan bruge Modernizr 3.5.0 til at registrere og nedbryde websiden efter behov.
Udnyttelse i rammer
Tailwind CSS inkorporerer CSS-gitter i sine hjælpeprogrammer til at kontrollere, hvordan elementer er dimensioneret og placeret. Imidlertid indeholder mange andre aktuelle webrammer ikke CSS-gitter, såsom Bootstrap 4 og Foundation 6.
fr-enheden
Enheden "fr" bruges ofte med CSS-gitterlayout. Enheden "fr", der er en del af CSS-gitterlayoutspecifikationen, repræsenterer en brøkdel af det resterende rum i gitterbeholderen.
Eksempler
"Holy grail" layout
Følgende er et eksempel på "Holy Grail" layoutet :
| HTML | Produktion |
|---|---|
<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>
|
|
Værditabel
Følgende er et eksempel på en værditabel:
| HTML | Produktion |
|---|---|
<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>
|
|
