Maak een responsieve lay-out met CSS-raster

Sep 13, 2025

Procedures

CSS GRID-indeling Groeit elke dag in browserondersteuning en we kunnen CSS-raster naar de productie verzenden. De snelle goedkeuring van CSS-raster is echt opmerkelijk geweest.

Voordat we een responsieve portfolio-site-lay-out maken met CSS-raster, laten we een paar dingen opruimen: CSS-raster is geen vervanging voor Flexbox Het is niet eens een vervanging voor drijvers. In feite kun je je beseffen dat we Flexbox hebben gebruikt om dingen te doen die CSS-raster veel beter doet. Maar in plaats van te denken in termen van vervanging, kunnen we denken in termen van combinatie.

15 Echt nuttige responsieve webontwerp tutorials

Stel je een pindakaas en jelly sandwich. Pindakaas en jelly zijn vrij geweldig alleen, maar wanneer ze samenkomen, gebeurt er een nieuw ding en gebeurt magie.

Dit is wat onze Website-indeling Hulpmiddelen zijn als. Ze zijn geweldig in de dingen die ze individueel doen, maar wanneer ze gecombineerd zijn, gebeurt magie en kunnen we nieuwe en opwindende lay-outs creëren. In dit geval maken we een webontwikkeling PB & AMP; J van onze eigen met CSS-net en flexbox. Wilt u uw proces nog verder vereenvoudigen? Kies een fatsoenlijk website bouwer

01. Stel uw markup in

case study title repeated — Onze lay-out ziet er niet veel uit, maar het skelet met onze zes items is aanwezig

In deze tutorial gaan we CSS-raster en flexbox samen gebruiken om een responsieve portfolio-lay-out te creëren. Elk van deze vakken is een andere grootte, sommige van hen overspannen over rijen en elke doos heeft een titel die onderaan zit. We zullen sommige van de grote uitlijngereedschappen gebruiken die met FLEXBOX komen om dat te laten gebeuren.

Laten we beginnen met het opzetten van onze markup.

 & lt; ul class = "dozen" & GT;
  & LT; LI & GT;
    & LT; DIV-klasse = "Boxes__Text-Wrapper" & GT;
      & LT; H2 & GT; CASE STUDY TITLE & LT; / H2 & GT;
      & LT; P & GT; een pakkende beschrijving voor onze case study. We hebben hard gewerkt. & LT; / P & GT;
    & LT; / DIV & GT;
  & LT; / LI & GT;
& LT; / UL & GT;

We zullen die lijstitem en alles zes keer dupliceren, dus we hebben items om mee te spelen. In het geval dat je je afvraagt, hebben we besloten om de ul element hier omdat dit een lijst met inzendingen is. Voel je vrij om te gebruiken wat je recht op je voelt.

Binnenkant van het lijstitem hebben we een div met de klas van .Boxes__Text-Wrapper Dat zal de titel van de case study en de bijbehorende beschrijving bevatten.

02. Schrijf de basisstijlen

case study title with different styling — We hebben ons lettertype ingesteld op iets een beetje mooier en de standaardmarge van kopjes en alinea's verwijderd

Laten we nu een aantal basisstijlen instellen om mee te werken.

 Body {
  Font-familie: Avenir, Sans-serif;
  marge: 2Rem Auto;
  Breedte: 95%;

H2,
p {
  marge: 0;

ul {
  lijst-stijl: geen;
  Vulling: 0;
  marge: 0;

.Boxes & GT;
  Vulling: .5rem;
  Achtergrondkleur: # 333;
  kleur wit;
}

We hebben het lettertype veranderd om Avenir te zijn. We verwijderen de marge van onze kop en alinea en reset de ongeordende lijst. We geven ook elke lijstitem enkele standaardstijlen om ons te helpen zien waar iedereen is.

03. Zet je raster in

case study title with gaps between them — Met slechts drie regels hebben we een goot toegevoegd tussen onze rasterartikelen en maakten ze een beetje groter

We willen eerst onze lay-out voor mobiel bouwen. Het instellen van ons raster op kleine schermen is net zo eenvoudig als dit:

 .Boxes {
  Weergave: raster;
  Net-auto-rijen: MINMAX (125PX, AUTO);
  raster-gap: .5rem;
}

Grid stapelt onze items op elkaar, omdat er standaard slechts één kolom is. We maken wat ruimte tussen elke case-studie met behulp van gap - Hiermee kunt u een goot tussen rijen en kolommen toevoegen.

Vergeet het toevoegen van een marge aan kolommen alleen om complex te hebben nde-kind selectors; Goten verschijnen alleen tussen kolommen of rijen, nooit na of vóór een kolom of rij.grid-gap is de steno van rasterkolom-kloof en grid-rij-gap Meestal zouden we de overhand gebruiken, maar we gaan allebei overschrijven als de browser groeit, zodat we de steno gebruiken.

Vervolgens zullen we gebruiken raster-auto-rijen om ons grid container de hoogte van nieuwe rijen te vertellen. Grid maakt nieuwe rijen om al onze inhoud te plaatsen. We kunnen de grootte van deze automatisch gemaakte rijen beheersen met de raster-auto-rijen eigendom. We gebruiken een nieuwe functie beschikbaar voor ons: MINMAX () Met MINMAX () We kunnen een minimale grootte en een maximale grootte opgeven.

Met onze code zeggen we dat we willen dat onze rijen een minimum van 120px en een maximum van auto zijn. We gebruiken Auto hier omdat we willen dat onze rijen groeien als de inhoud het garandeert.

04. Zet grote browsercompatibiliteit in

case study title in a row — Ons rooster krijgt vorm! We hebben zes kolommen om met en minder goot tussen onze rasteritems te werken

Laten we onze pagina opzetten, zodat wanneer onze browser 40em of groter is, onze rastercontainer zes kolommen van één fractie elk heeft.

 @media-scherm en (min-breedte: 40em) {
  .Boxes {
    Rasterjabloon-kolommen: herhaal (6, 1fr);
    raster-gap: 2px;
  
}

Rasterjabloon-kolommen Is het pand dat we gebruiken om ons rooster te vertellen hoeveel kolommen moeten bestaan. Het accepteert alle lengte-eenheden die we kennen en houden van zoals rem em px , percentages, vw vh en fr

De fr is een nieuwe eenheid die we krijgen bij CSS GRID-indeling. Daarmee kunnen we de browser vertellen om wiskunde te doen in plaats van ons - uitstekend.

Door de browser te vertellen om zes kolommen van één fractie te maken, berekent de browser de breedte van onze rastercontainer en splitst u deze in zes gelijke kolommen. Ook, omdat het raster slim is, verdankt het alleen de ruimte die overblijft na het berekenen van de goot die we hebben opgegeven.

05. Individuele items in stijl

case study title with an image behind — Koffie laat alles er leuker uitzien, het niet? Ook de subtiele gradiënt maakt onze titel en beschrijving op

Onze casestudy's zien er een beetje saai uit als gewoon grijze dozen. Laten we een achtergrondafbeelding toevoegen, onze titels laten zien aan de onderkant van deze vakjes en voegen een verloop toe zodat onze titel opvalt.

 .Boxes Li {
  achtergrond afbeelding:
    lineaire verloop (RGBA (0,0,0,0,0), RGBA (0,0,0,0.8)),
    URL (pad / naar / afbeelding);
  Achtergrondformaat: dekking;
  Display: Flex;
  Align-items: flex-end;
}

Deze achtergrondafbeelding was een gratis beeld van Plassen , maar voel je vrij om te gebruiken wat je maar wilt. Ik breng ook Flexbox in de mix om onze tekst naar de onderkant van onze dozen uit te lijnen. Je zult dat nog niet zien, maar terwijl we elke andere doos plaatsen, zie je het uiteindelijk het werk.

06. Plaats items op het raster

case study title with one image above and five below — Grid maakt het gemakkelijk om onze rasteritems te formuleren, maar we willen. Maar dit is slechts het begin

Helaas heeft Grid geen manier om items automatisch in de roosterlay-out te plaatsen die we aan het begin zagen. Gelukkig voor ons geeft Grid ons echter de tools om het handmatig gemakkelijk te doen. In deze tutorial gebruiken we nth-kind om elk lijstitem te plaatsen. In een productiewebsite zouden we adviseren om een klasse te gebruiken die, gezien de juiste planning, het mogelijk zou kunnen maken om lay-outs zoals deze in een inhoudelijke site te automatiseren.

Laten we aan de slag met ons eerste item.

 @media-scherm en (min-breedte: 40em) {
  .Boxes Li: nth-kind (1) {
    Rasterkolom: 1 / -1;
    Rasterrij: Span 3;
  
}

We zullen al onze plaatsingsstijlen binnen van die media-query plaatsen die we eerder schreven, omdat we willen dat deze lay-out zal gebeuren nadat onze browser 40 mem of groter is. Met nde-kind We richten op het eerste itemitem. Met CSS Grid laat ons gemakkelijk onze items plaatsen met rasterkolom en rasterrij. Er zijn veel verschillende manieren om op te geven waar items moeten zijn, maar hier vertellen we ons artikel om te beginnen bij kolomregel één en spanning de hele container met -1.

Dan vertellen we met grid-rij het artikel om drie rijen te span. Hoe weten we dat drie rijen de maat zijn die we willen? Welnu, we hebben de grootte van deze rijen opgegeven met net-auto-rijen een paar ogenblikken geleden, en als we niet blij zijn met hen, kunnen we de minimale grootte wijzigen.

Laten we de rest van onze items plaatsen.

@media-scherm en (min-breedte: 40em) {
  .Boxes Li: nth-kind (2) {
    Rasterkolom: Span 2;
    Rasterrij: Span 7;
  

  .Boxes Li: nth-kind (3) {
    Rasterkolom: Span 4;
    Rasterrij: Span 3;
  

  .Boxes Li: nth-kind (4) {
    Rasterkolom: Span 2;
    Rasterrij: Span 4;
  

  .Boxes Li: nth-kind (5),
  .Boxes Li: nth-kind (6) {
    Rasterkolom: Span 2;
    Rasterrij: Span 2;
  
}

Is het niet verbazingwekkend hoeveel controletelay-out ons geeft? Met slechts een paar regels code kunnen we een volledig responsieve lay-out samenstellen die niet zal breken als er meer items worden toegevoegd.

Natuurlijk, ze kunnen er een beetje wankel uitzien omdat ze alleen maar één rasterkolom en rij in rekening brengen, maar het breekt onze lay-out niet. Als we dit met drijvers en vaste breedtes en hoogtes deden, zouden we in een binden zijn als er meer inhoud moest worden toegevoegd.

finished layout with different images in different places — Onze afgewerkte lay-out! Is dit geweldig? Grid stelt ons in staat om onze artikelen gemakkelijk in twee dimensies te plaatsen

Een snel terzijde over oudere browsers

Ok, het is tijd om de olifant in de kamer aan te pakken. 'Hoe zit het met oudere browsers?' Het antwoord op deze vraag is hetzelfde als voor een nieuwe functie in CSS: gebruik functie-query's en omarmen de cascade. Functiequery's zijn Zeer goed ondersteund , en waar ze niet zijn, kunnen we eerst onze fallback plaatsen. We schrijven bijvoorbeeld iets in de richting van:

. Uw-selector {
  Display: Flex;


/ * Uw netcode * /
@supports (display: raster) {
  Weergave: raster;
  Rasterjabloon-kolommen: herhaal (3, 1fr);
  GAP: 1REM 2REM;
}

Het schrijven van onze code betekent op deze manier dat als de browser grid lay-out begrijpt, het zal gebruiken in plaats van Flexbox. Omdat we de cascade omarmen, zullen browsers die geen functiequery's begrijpen, ze negeren en hebben ze al de informatie die ze nodig hebben. Mogelijk moeten we plannen hoe we onze stijlen een beetje meer dan normaal schrijven, maar door het te doen, kunnen we uitstekende lay-outs maken met verstandige fallbacks. Als u uw oude pagina's wilt opslaan, exporteert u ze als PDF's en sla ze op in cloud opslag

Ook, aangezien de tijd doorgaat, zal er alleen meer en meer ondersteuning zijn voor CSS-raster. Denk maar aan hoe groot het zou zijn om later onze fallbacks te verwijderen en alle rastergerelateerde CSS te verlaten. Zoals je meer over raster leert, realiseer je je dat het veel dingen doet die we nu doen met veel minder lijnen van CSS. Vergeet niet dat als je een bijzonder complexe site hebt, jouw web hosting Service moet aan het krassen zijn.

Dit artikel verscheen oorspronkelijk in netto tijdschrift , 's werelds toonaangevende tijdschrift voor ontwikkelaars en webontwerpers. Abonneer hier

Lees verder:

CSS Grid lay-out geheimen onthuld
30 Webontwerphulpmiddelen om uw workflow te versnellen
Mode flexibele lay-outs met CSS-raster

Maak een responsieve lay-out met CSS-raster

01. Stel uw markup in

02. Schrijf de basisstijlen

03. Zet je raster in

04. Zet grote browsercompatibiliteit in

05. Individuele items in stijl

06. Plaats items op het raster

Een snel terzijde over oudere browsers

Procedures - Meest populaire artikelen

21 manieren om de productiviteit met NPM

Hoe draait u de dag in de nacht in Photoshop

Maak een interactieve parallax-afbeelding

Creëer verbluffende tegelbare texturen in blender

Hoe de prestaties van e-commerce-sites

Hoe bouwen van werelden voor de bioscoop

De ultieme gids voor het compositeren van afbeeldingen in Photoshop

De anatomie van karikatuur: 15 toptips

Categorieën