Mode flexibele lay-outs met CSS-raster

Sep 12, 2025

Procedures

A woman sits at a laptop tweaking a CSS Grid layout

CSS-raster is perfect voor het maken van twee-assige lay-outs van rijen en kolommen. De syntaxis is eenvoudig en maakt de pagina-indeling een briesje. Lay-outs die meerdere geneste containers nodig hebben, kunnen nu eenvoudig worden beschreven in CSS.

Grid werkt anders op andere lay-outeigenschappen, aangezien het toepassen van de 'Grid'-waarde naar de eigenschap' Display 'beïnvloedt eventuele directe kinderen. Deze elementen zijn nu rasteritems en worden gepositioneerd volgens de regels die u op de ouder hebt ingesteld (tenzij speciaal geplaatst).

Krijg grip met het raster

Grid brengt een aantal nieuwe functies:

Gat

In plaats van marges te gebruiken, heeft Grid een eigen eigendom voor het definiëren van hiaten tussen rasteritems, waardoor de lay-out van het rooster kan worden gedefinieerd en onaangetast door alle gaten. Rastersystemen (zoals die gevonden in Inuit en Twitter bootstrap) vertrouwen meestal op het instellen van negatieve marges om alles correct uit te lijnen.

De FR-eenheid

Kort voor fractie, deze nieuwe meeteenheid wordt gebruikt om de lay-out te splitsen in fracties, met of zonder een gat.

Rasterplaatsing

CSS-raster zorgt ervoor dat elk element dat wordt geprioriteerd en overal op het raster geplaatst voordat alle andere items, die vervolgens automatisch worden gepositioneerd.

Netgebieden en sjablonen

Genoemde gebieden op het raster zijn gedefinieerd, waarnaar kan worden verwezen om de lay-out in een bijna ASCII-mode te definiëren.

MINMAX ()

Met de eigenschap 'MINMAX ()' kunt u een minimum- en maximale grootte toepassen op rasteritems, kolommen en rijen. Deze functie ontbreekt helaas in Flexbox en elke andere lay-outmodule in CSS.

Bouw je rasters

CSS Grid's krachtige gebieden en sjablonen maken gecompliceerde lay-outs in om gemakkelijk te worden bereikt. U begint met het toepassen van een naam op de elementen in uw raster met behulp van het eigenschap 'GRID-area' - bijvoorbeeld 'Header {Grid-Area: Header;Zodra u alle gebieden in uw rooster hebt genoemd, kunt u de eigenschap 'Rasterjabloongebieden gebruiken om de lay-out te beschrijven.

 Rasterjabloongebieden:
  "Header header header"
  "Left-sidebar-artikel rechts-sidebar"
  "Footer Footer Footer"
;

Het bovenstaande voorbeeld beschrijft een drie-bij-drie-raster, u herhaalt eenvoudig de naam van het rasteritem als u wilt dat deze meerdere kolommen of rijen span. U kunt ook media-query's gebruiken om de roosterlay-out te wijzigen voor schermen met verschillende grootte.

U kunt vervolgens de nieuwe 'FR'-eenheid gebruiken om te definiëren hoe de breedte wordt verdeeld onder de verschillende kolommen:

 Rasterjabloon-kolommen: 1FR 3FR 1FR;

Het hierboven getoonde voorbeeld splitst de beschikbare breedte in vijf gelijke breedtewaarden; Met andere woorden, het is een vijfde van toepassing op de eerste kolom, drie-vijfde tot de tweede kolom en de laatste vijfde tot de laatste kolom.

Om de rijen te formuleren kunt u de nieuwe 'MINMAX' -optiewaarde gebruiken om de boven- en onderste kolommen op hun inhoud te formuleren en vervolgens de middelste rij in te schakelen de resterende ruimte in het rooster.

 Rasterjabloon-rijen:
  MINMAX (min-inhoud, max-inhoud)
  auto
MINMAX (min-inhoud, max-inhoud);

Dit artikel is oorspronkelijk gepubliceerd in kwestie 271 van Creative Web Design Magazine Web Designer. Kopen uitgave 271 of Abonneer u op Web Designer

Wil je je CSS-netvaardigheden versterken?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda Storer geeft haar gesprek met CSS-raster in de echte wereld bij Generate New York van 25 - 27 april 2018

Als ontwerper en front-end ontwikkelaar bij een Software Development Agency gebruikt Brenda Storer CSS-raster in productie voor websites sinds de eerste release aan browsers in maart 2017 en is een grote ventilator.

In haar gesprek Genereer New York van 25-27 april 2018 Brenda zal stap voor stap zien hoe je je site progressief kunt verbeteren met CSS-raster en een kogelvrije fallback schrijven voor oudere browsers (of zelfs doorgaan met het gebruik van je huidige rastramework als een fallback), allemaal met Pure CSS: Nee Javascript vereist .

Genereer New York vindt plaats van 25-27 april 2018. KRIJG NU

Gerelateerde artikelen:

CSS Grid lay-out geheimen onthuld
Maak een responsieve lay-out met CSS-raster
Ga op snelheid met CSS-raster

Mode flexibele lay-outs met CSS-raster

Krijg grip met het raster

Bouw je rasters

Wil je je CSS-netvaardigheden versterken?

Procedures - Meest populaire artikelen

Een Alexa-vaardigheid maken voor uw site

Hoe een kasteel met SketchUp te schilderen

Verf een klassieke sprookjescène met uitspreiding

Voeg visuele aanwijzingen toe aan uw site

De ultieme gids voor het compositeren van afbeeldingen in Photoshop

Hoe Manga-stijl haar in beweging te maken

Hoe meer te krijgen van digitale texturen

Hoe beweging in uw 3D-renders vast te leggen

Categorieën