CSS
Rutnät
Sök…
Introduktion
Grid layout är ett nytt och kraftfullt CSS-layoutsystem som gör det möjligt att dela upp ett innehåll på webbsidan i rader och kolumner på ett enkelt sätt.
Anmärkningar
CSS Grid Layout Module Level 1 är den 9 september 2016 en W3C kandidatrekommendation. Det anses vara i teststadiet ( https://www.w3.org/Style/CSS/current-work) .
Från och med 3 juli 2017 stöder Microsofts Internet Explorer 10 och 11 och Edge-webbläsare endast en äldre version av specifikationen med hjälp av ett leverantörsprefix.
Grundläggande exempel
| Fast egendom | Möjliga värden |
|---|---|
| visa | rutnät / inline-rutnät |
CSS Grid definieras som en visningsegenskap. Det gäller endast ett förälderelement och dess omedelbara barn.
Överväg följande markering:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
Det enklaste sättet att definiera markeringsstrukturen ovan som ett rutnät är att helt enkelt ställa in display till grid :
.container {
display: grid;
}
Att göra detta kommer emellertid alltid att få alla barnelement att kollapsa ovanpå varandra. Det beror på att barnen för närvarande inte vet hur de ska placera sig i nätet. Men vi kan uttryckligen berätta för dem.
Först måste vi berätta .container hur många rader och kolumner som kommer att utgöra dess struktur och vi kan göra detta med hjälp av grid-columns och grid-rows (notera pluraliseringen):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Men det hjälper oss fortfarande inte så mycket eftersom vi måste ge en order till varje barnelement. Vi kan göra detta genom att ange värden på grid-row och grid-column som säger var det sitter i rutnätet:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
Genom att ge varje objekt ett kolumn- och radvärde identifierar det ordningsföljden i behållaren.
Se ett fungerande exempel på JSFiddle . Du måste se detta i IE10, IE11 eller Edge för att det ska fungera eftersom det för närvarande är de enda webbläsarna som stöder rutnätlayout (med leverantörsprefix -ms- ) eller aktivera en flagga i Chrome, Opera och Firefox enligt caniuse i ordning att testa med dem.
