En guide till CSS Grid: Att bemästra layouter med rutnätsegenskaper

Att positionera element på en webbsida kan vara mycket komplicerat när man arbetar med komplexa layouter. Det är här CSS grid kommer in i bilden. Det är ett layoutsystem som är utformat för att förenkla processen med att skapa komplexa layouter.

Användning av CSS Grid ger en unik fördel jämfört med konventionella layouttekniker genom att det möjliggör placering av element i både rader och kolumner inom ett tvådimensionellt ramverk. Detta flexibla arrangemang förbättrar designprocessen jämfört med mer restriktiva alternativ som är begränsade till en enda dimension.

Grid Containers and Items

När man använder CSS Grid kan man tillämpa dess egenskaper på antingen överordnade eller underordnade element. Genom att ange egenskapen display till "grid" på ett överordnat element omvandlas det till en gridbehållare, varpå alla efterföljande underordnade element blir gridobjekt och ärver de angivna gridegenskaperna.

Så här representeras det:

Ett grid-element kan själv omvandlas till en grid-behållare. Denna konfiguration kallas för en kapslad gridstruktur, där ett grid finns inuti ett annat. I det här scenariot är den primära gridbehållaren utsedd till det yttre griddet, medan det transformerade elementet antar rollen som det inre griddet.

De enskilda gridsen fungerar självständigt i förhållande till varandra; de attribut som tilldelas ett internt grid har således ingen inverkan på arrangemanget av det externa gridsen, och tvärtom.

Så här ser det ut:

En djupgående förståelse för samspelet mellan rutnätsbehållare och deras innehåll är oumbärlig när man försöker konstruera sammanhängande, tvådimensionella arrangemang med precision.

Observera att gridcontainrar har sina egna egenskaper, medan de som hör till gridobjekt är skilda från dem.

Gridlinjer och spår

Innan du börjar använda CSS Grid är det viktigt att ha en omfattande förståelse för två grundläggande begrepp:

Gridlinjer är de horisontella och vertikala linjer som skapar strukturen i en CSS-gridlayout genom att definiera start- och slutpunkterna för rader och kolumner. I likhet med kanterna på fysiska lådor har dessa linjer numeriska värden för exakt placering inom gridsystemet. Illustrationen visar en röd streckad linje som representerar förekomsten av gridlinjer.

⭐ Rutnätsspår: De är mellanrummen mellan rutnätslinjer som definierar rader och kolumner.De är som byggstenarna i rutnätets layout. I bilden ovan representerar det färgade området inom varje objekt rutnätets spår.

Betrakta gridlinjer och spår som analoga med linjerna på ett grafiskt papper, som fungerar som grunden för en gridlayout. När en horisontell gridlinje blandas med en vertikal uppstår en rektangulär cell, som fungerar som ett hölje där gridelement kan placeras.

CSS Grid Container Properties

grid", dessutom finns det ytterligare CSS-egenskaper som kan användas för att uppnå en harmonisk fördelning av visuella element och deras motsvarande positioner på webbsidan. Några av dessa är

Grid Template

Den här egenskapen reglerar måtten på rader och kolumner, som kan bestämmas i pixlar, procent eller bråkdelar. Dessutom finns olika nyckelord som “auto”, “minmax”, “repeat” tillgängliga för att öka mångsidigheten.

⭐grid-template-rows: Ställer in radhöjder.

⭐grid-template-kolumner: Definierar kolumnbredder.

Här är några exempel:

Använda pixlar:

 .grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
} 

Använda procentsatser:

 .grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
} 

Använda fr:

 .grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Använda auto och minmax() Nyckelord:

 .grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

Använda repeat() för konsekvent storlek:

 .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

Auto Placement och Grid Template Areas

Auto Placement möjliggör en automatiserad process för objektarrangemang inom ett rutnätssystem, utan någon specifik positionering eller organisation som tillhandahålls av användaren. Istället bestämmer algoritmen optimala placeringar baserat på i vilken ordning objekten listas i källkoden. Denna funktion kan vara särskilt användbar i situationer där många element behöver fördelas jämnt över en layout, vilket möjliggör effektivt utnyttjande av tillgängligt utrymme utan manuell inblandning.

Grid-mallområden fungerar som ett ramverk för att organisera och strukturera innehåll i en grid-container, genom att definiera specifika regioner eller “zoner” som identifieras med sina respektive namn. Dessa namngivna områden fungerar på samma sätt som rumsbeteckningar i en byggnadsritning och gör det möjligt för designers att tilldela positioner till rutnätselement baserat på deras angivna zonreferenser. Genom att använda denna metod kan utvecklare skapa komplexa och exakta layoutstrukturer med större enkelhet och flexibilitet.

 .grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

Den aktuella konfigurationen uppvisar en matris med tre kolumner och fyra rader.Den innehåller två rader som fungerar som den primära innehållsregionen. De angivna regionerna omfattar “header”, “sidebar”, “content” och “footer”. Därefter kommer vi att fördjupa oss i hur man använder dessa områdesbeteckningar inom attributen för varje rutnätselement.

Justering i CSS Grid

Du kan använda justeringsattribut för att reglera placeringen av grid-element inom deras respektive grid-celler. Dessa egenskaper inkluderar:

⭐ justify-items : Styr horisontell justering av objekt inom deras rutnätscell.

De intressanta värdena är startpunkten, slutpunkten, det centrala läget och graden av förlängning som är associerad med denna datauppsättning.

⭐ align-items : Kontrollerar vertikal justering av objekt inom deras rutnätscell.

De värden som är av intresse i detta sammanhang är startpunkt, slutpunkt, centralt läge och graden av elasticitet som är associerad med dessa parametrar.

⭐ justify-content : Justerar hela rutnätet i behållaren längs den horisontella axeln.

De värden som kan användas för att ställa in avståndet mellan instanser av ett markörkluster inkluderar “start”, “slut”, “center”, “stretch”, “space-between”, “space-around” och “space-evenly”.

⭐ align-content : Justerar hela rutnätet i behållaren längs den vertikala axeln.

De tillgängliga värdena för att styra avståndet mellan objekt i en flexbehållare inkluderar “start”, “slut”, “center”, “stretch”, “space-between”, “space-around” och “space-evenly”.

Här är ett exempel:

 .grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
} 

Centralisering uppnås genom att utrymmet fördelas jämnt mellan alla kolumner i hela rutnätet, där varje objekt placeras i mitten både horisontellt och vertikalt i sin respektive cell. Det resulterande arrangemanget säkerställer att gallret antar en balanserad disposition, med lika avstånd mellan intilliggande element, samtidigt som det bibehåller en upprätt orientering i linje med den vertikala axeln i moderbehållaren.

Grid Gap

Grid Gap, även känt som cellavstånd eller avstånd mellan element, avser den öppna yta som finns mellan raderna och kolumnerna i en rutnätslayout. Denna designaspekt används för att visuellt skilja intilliggande element inom rutnätet och ger lite andrum för varje enskilt objekt.

Egenskapen grid-gap gör det möjligt att specificera avståndet mellan rutnätselement längs både rad- och kolumnaxlar, med hjälp av en rad olika enheter inklusive pixlar (px), procentandelar (%) och em-enheter (em).

 .grid-container {
  grid-gap: 20px;
} 

Det aktuella exemplet består av en rutnätscontainer med två kolumner som är åtskilda med en marginal på tjugo pixlar. Ett sådant arrangemang tjänar till att avgränsa kolumnerna både visuellt och när det gäller layout, vilket förbättrar deras särskiljningsförmåga.

CSS Grid Objekt Egenskaper

Visst! Presentationen beskriver flera viktiga egenskaper som reglerar hur enskilda objekt ska hanteras i ett CSS Grid-arrangemang, tillsammans med illustrativa exempel:

grid-row-start och grid-row-end:

Radindex för start och slut för ett givet element anges av denna egenskap.

Värden för span kan inkludera radnummer, t.ex. “span n”, eller så kan de ställas in så att de automatiskt justeras baserat på skärmens storlek med hjälp av inställningen “auto”.

 .grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

Den givna koden positionerar Grid Item 1 inom ett spann av rader, som sträcker sig från den andra radens vertikala justering till den fjärde radens motsvarande position.

grid-column-start och grid-column-end:

Funktionen range används för att definiera start- och slutkolumnnumren för ett visst objekt i en tabell eller ett kalkylblad. Detta gör att du kan ange vilken del av data som ska inkluderas när du refererar till den, oavsett om det är för visningsändamål eller som en del av en formelberäkning.

Värden kan anta olika former som radnummer, “span n” eller “auto”.

 .grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Den angivna koden placerar Grid Item 2 på ett sådant sätt att den sträcker sig över tre kolumner, med början på den första raden i den första kolumnen och slut på den sista raden i den andra kolumnen.

grid-area:

CSS-egenskapen grid-template-areas gör det möjligt att ange dimensioner och placering av ett element i en gridcontainer genom att hänvisa till specifika gridlinjer via deras respektive namn.

Absolut! Användningen av förutbestämda regionetiketter underlättas för närvarande genom implementeringen av egenskapen grid-template-areas . En demonstration av dess integration tillsammans med egenskapen grid-area kan observeras enligt följande:

 .header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
} 

Här är resultatet:

justify-self:

Horisontell justering av enskilda objekt i en cell uppnås genom att justera dem längs den horisontella axeln.Detta kan göras med hjälp av olika formateringsalternativ, t.ex. textjustering eller inställningar för tabellegenskaper. Den specifika metoden för att uppnå detta beror på sammanhanget och kraven i den specifika applikation där den används.

Värden i grafisk design omfattar en rad olika möjligheter, inklusive att befinna sig i början eller slutet av ett elements bana, fungera som en central punkt kring vilken andra element kretsar eller sträcka sig bortom fastställda gränser för att skapa elasticitet. Dessa olika positioner möjliggör olika visuella effekter som bidrar till den övergripande kompositionen.

 .grid-item-5 {
  justify-self: center;
}

Den angivna koden justerar det femte rutnätsobjektet, Grid Item 5, på ett horisontellt sätt i mitten av dess respektive cell inom rutnätslayouten.

align-self:

Ändra inriktningen för varje objekt i en kolumn så att de placeras vertikalt i sina respektive celler.

Värden kan anta olika former, t.ex. vara en startpunkt, en slutpunkt, en central referens eller ett sätt att sträcka sig utanför sitt typiska område.

 .grid-item-1 {
  align-self: end;
}

Denna speciella kod orienterar och positionerar “Grid Item 1” så att den vilar på den lägsta punkten inom sin respektive gridcell.

Du uppmuntras att utöva kreativ kontroll över den visuella presentationen av enskilda rutnätsobjekt genom att använda en kombination av olika stilistiska egenskaper och därigenom uppnå en estetik som ligger i linje med de önskade designmålen.

Skapa responsiva layouter med CSS-rutnät

Att använda CSS-rutnät är avgörande för att skapa responsiva designer som enkelt anpassas till olika skärmdimensioner och prylar, vilket garanterar en smidig användarupplevelse över olika skärmstorlekar och enheter. Det finns flera tekniker som du kan använda för att uppnå detta mål på ett effektivt sätt.

Användning av media queries i kombination med CSS Grid Layout möjliggör adaptiv responsivitet baserat på skärmstorlek. Detta gör det möjligt för webbdesigners och utvecklare att dynamiskt ändra arrangemanget av rutnätselement och justera kolumnbredder enligt varierande skärmdimensioner, vilket säkerställer optimal visningsupplevelse över olika enheter och upplösningar.

Använd flexibla mått som procentvärden och “fr” för att möjliggöra en responsiv skalning av grid-element och kolumner, proportionellt mot det tillgängliga utrymmet.

Använd funktionen minmax() för att fastställa ett intervall av dimensioner för rutnätsceller, främja läsbarhet och kompatibilitet över olika skärmupplösningar genom att förhindra att innehållet blir antingen alltför litet eller överdimensionerat.

Ändra den medföljande texten för att förmedla samma budskap på ett mer raffinerat sätt.När du skräddarsyr dimensionerna på kolumner, avståndet mellan rutnätselement, typsnitt och vitt utrymme är det viktigt att behålla konsekvens i hela din design för optimal visning på olika plattformar.

Utforska möjligheterna med CSS Grid Layout

Genom att utnyttja mångsidigheten och kraften i CSS Grid kan man skapa estetiskt tilltalande och sömlösa layouter som tillgodoser både visuellt tilltal och de ständigt utvecklande kraven på modern webbdesign. Fördjupa dig därför i grids, undersök deras potential och förbättra din kompetens inom webbutveckling.

När man utforskar olika layouttekniker är det ofta bra att kontrastera CSS Grid med alternativa metoder som Flexbox. Modulen CSS Flexbox ger en möjlighet att utvärdera och avgöra vilken metod som är bäst lämpad för de specifika designkraven i ett visst projekt.