CSS
Rutnät

Introduktion

Anmärkningar

Grundläggande exempel

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.