CSS
rooster
Zoeken…
Invoering
Rasterlay-out is een nieuw en krachtig CSS-lay-outsysteem waarmee u de inhoud van webpagina's op een eenvoudige manier in rijen en kolommen kunt verdelen.
Opmerkingen
CSS Grid Layout Module Level 1 is, vanaf 9 september 2016, een W3C Candidate Recommendation. Het wordt beschouwd als in de testfase ( https://www.w3.org/Style/CSS/current-work) .
Vanaf 3 juli 2017 ondersteunen Microsoft's Internet Explorer 10 en 11 en Edge-browsers alleen een oudere versie van de specificatie met behulp van een leveranciersvoorvoegsel.
Basis voorbeeld
| Eigendom | Mogelijke waarden |
|---|---|
| Scherm | rooster / inline-rooster |
Het CSS-raster is gedefinieerd als een weergave-eigenschap. Het is alleen van toepassing op een ouderelement en zijn directe kinderen.
Overweeg de volgende markup:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
De eenvoudigste manier om de opmaakstructuur hierboven als een raster te definiëren, is door de display eigenschap eenvoudig op grid :
.container {
display: grid;
}
Als u dit doet, zullen alle onderliggende elementen echter onveranderlijk op elkaar instorten. Dit komt omdat de kinderen momenteel niet weten hoe ze zich binnen het raster moeten positioneren. Maar we kunnen het hen expliciet vertellen.
Eerst moeten we het roosterelement .container vertellen hoeveel rijen en kolommen zijn structuur zullen vormen en we kunnen dit doen met behulp van de eigenschappen van de grid-columns en grid-rows (let op de pluralisering):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Dat helpt ons echter nog steeds niet veel, omdat we elk kind een order moeten geven. We kunnen dit doen door de grid-row en grid-column te geven die aangeven waar deze zich in het raster bevindt:
.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;
}
Door elk artikel een kolom- en rijwaarde te geven, identificeert het de artikelenvolgorde in de container.
Bekijk een werkend voorbeeld op JSFiddle . Je moet dit bekijken in IE10, IE11 of Edge om het te laten werken, omdat dit momenteel de enige browsers zijn die Grid Layout ondersteunen (met leveranciersvoorvoegsel -ms- ) of een vlag in Chrome, Opera en Firefox inschakelen volgens caniuse om om met hen te testen.