Lär dig hur du använder CSS-rutnät för att enkelt bygga komplexa layouter.

Att placera element på en webbsida kan vara mycket komplicerat när man arbetar med komplexa layouter. Det är här CSS-rutnätet kommer väl till pass. Det är ett layoutsystem utformat för att förenkla processen att skapa komplexa layouter.

Hur hjälper det dig? Till skillnad från traditionella layoutmetoder som bara låter dig placera element i antingen rader eller kolumner, erbjuder CSS-rutnät dig det bästa av två världar – en 2D-metod som använder rader och kolumner.

Gridbehållare och föremål

Du kan tillämpa CSS-rutnätsegenskaper på två huvudtyper av element: förälder och barn. När du ställer in egenskapen display till "grid" för ett överordnat element, omvandlar det elementet till en grid-behållare. Alla underordnade element i denna rutnätsbehållare blir ett rutnätsobjekt och ärver de tillämpade rutnätsegenskaperna.

Så här representeras det:

Ett rutnätsobjekt kan också bli en rutnätsbehållare. Du kan nu hänvisa till layouten som ett kapslat rutnät – ett rutnät i ett rutnät. Huvudgallerbehållaren kallas nu för det yttre rutnätet, medan den omvandlade rutnätsbehållaren blir ett inre rutnät.

instagram viewer

Vart och ett av dessa rutnät fungerar oberoende av det andra, vilket innebär att egenskaperna för ett inre rutnät inte påverkar layouten på det yttre rutnätet, och vice versa.

Så här ser det ut:

Att bemästra förhållandet mellan gallerbehållare och föremål är viktigt för bygga tvådimensionella layouter effektivt.

Tänk på att det finns rutnätsegenskaper för rutnätsbehållare, medan andra är för rutnätsartiklar.

Rutnätslinjer och spår

Innan du börjar använda CSS-rutnätet finns det två nyckeltermer du bör känna till:

  1. Rutnätslinjer: Rutnätslinjer hänvisar till de horisontella och vertikala linjerna som bildar rutnätet i en CSS-rutnätslayout. De anger start- och slutpunkterna för rader och kolumner, vilket hjälper till att organisera var saker och ting går i rutnätet. Dessa linjer är som kanterna på lådor; de har siffror som hjälper dig att referera till elementen vid positionering. Här representerar den röda streckade linjen dem:
  2. Grid spår: De är luckorna mellan rutnätslinjer som definierar rader och kolumner. De är som byggstenarna i rutnätslayouten. I bilden ovan representerar det färgade området inom varje objekt rutnätsspåret.

Tänk på rutnätslinjer och spår som byggstenarna i en rutnätslayout, som linjerna på ett ark av millimeterpapper. När en horisontell rutnätslinje skär en vertikal rutnätslinje, bildar den en rutaformad cell. Dessa celler fungerar som behållare där du kan placera dina rutnätsobjekt.

CSS Grid Container Properties

Det här är egenskaper du kan tillämpa på rutnätsbehållaren för att organisera layouten och hjälpa till med att placera element i den. Som nämnts tidigare är en av dem visningsegenskapen inställd på rutnät. Här är fler:

Rutnätsmall

Den här egenskapen definierar storleken på rader och kolumner. Du kan storleksanpassa dessa egenskaper med hjälp av pixlar, procenttal eller bråkdelen (fr). Du kan också använda nyckelord som bil, min Max(), och upprepa() för att öka flexibiliteten.

  • rutnät-mall-rader: Ställer in radhöjder.
  • rutnät-mall-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%;
}

Med hjälp av fr:

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

Använder auto och minmax() nyckelord:

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

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

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

Autoplacering och rutnätsmallområden

Automatisk placering: Automatisk placering är som att låta rutnätet bestämma var objekt ska placeras. Om du inte anger exakta positioner kommer rutnätet automatiskt att placera objekt i den ordning de visas i markeringen. Detta är användbart när du har många föremål och vill att de ska fylla rutnätet jämnt.

Rutnätsmallområden: Tänk på rutnätsmallområden som att skapa en layout med namngivna zoner. Det är som att namnge rum på en planlösning. Du kan hänvisa till dessa områdesnamn när du placerar rutnätsobjekt. Till exempel:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Denna layout är som ett rutnät med tre kolumner och fyra rader. Det finns två rader för huvudinnehållsområdet. De märkta områdena inkluderar "sidhuvud", "sidofält", "innehåll" och "sidfot". I nästa avsnitt kommer du att lära dig hur du använder dessa områdesetiketter i egenskaperna för varje rutnätsobjekt.

Justering i CSS Grid

Du kan använda justeringsegenskaper för att styra placeringen av rutnätsobjekt i deras rutnätsceller. Fastigheterna är:

  • motivera-objekt: Styr horisontell justering av objekt inom deras rutnätscell.
    • Värderingar: start, slut, mitt och sträck.
  • align-objekt: Styr vertikal justering av objekt inom deras rutnätscell.
    • Värderingar: start, slut, mitt och sträck.
  • motivera-innehåll: Justerar hela rutnätet i behållaren längs den horisontella axeln.
    • Värderingar: start, slut, mitt, sträck, mellanrum, mellanrum runt och jämnt mellanrum.
  • anpassa-innehåll: Justerar hela rutnätet i behållaren längs den vertikala axeln.
    • Värderingar: start, slut, mitt, sträck, mellanrum, mellanrum runt och jämnt mellanrum.

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;
}

I det här exemplet kommer objekt att centreras både horisontellt och vertikalt i sina celler. Utrymmet kommer att fördelas jämnt mellan kolumnerna i hela rutnätet, och rutnätet kommer att centreras vertikalt i behållaren.

Grid Gap

Rutnätsgap hänvisar till utrymmet mellan rader och kolumner i en rutnätslayout. Det hjälper till att skapa visuell separation och lägger till lite utrymme mellan rutnätsobjekt.

De rutnätsgap egenskap låter dig ställa in gapet mellan rader och kolumner. Du kan använda olika enheter för att definiera det, till exempel pixlar (px), procentsatser (%), em-enheter (em) och mer.

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

I det här exemplet har rutnätsbehållaren två kolumner med ett mellanrum på 20 pixlar mellan dem. Detta avstånd separerar kolumnerna visuellt och förbättrar layouten.

CSS Grid Item Properties

Här är några nyckelegenskaper som styr beteendet hos enskilda rutnätsobjekt i en CSS-rutnätslayout, tillsammans med exempel:

rutnät-rad-start och rutnät-rad-slut:

  • Definierar start- och slutraderna för ett objekt.
  • Värden kan vara radnummer, "span n" eller "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Denna kod placerar Rutnätsobjekt 1 från raden andra raden till raden fjärde raden.

rutnät-kolumn-start och rutnät-kolumn-slut:

  • Definierar start- och slutkolumnraderna för ett objekt.
  • Värden kan vara radnummer, "span n" eller "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Denna kod placerar Rutnätsobjekt 2 från den första kolumnraden till den tredje kolumnraden.

rutnätsområde:

  • Anger storleken och positionen för ett rutnätsobjekt i rutnätet genom att referera till de namngivna rutnätslinjerna i rutnät-mall-områden.
  • Som nämnts tidigare är fördefinierade områdesnamn redan i bruk med rutnät-mall-områden fast egendom. Här är ett exempel på hur man använder det tillsammans med rutnätsområde. 
.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:

rättfärdiga-själv:

  • Justerar enskilda objekt horisontellt i sin cell.
  • Värden kan vara start, slut, center och stretch. 
.grid-item-5 {
justify-self: center;
}

Denna kod centrerar horisontellt Rutnätsobjekt 5 inom sin cell.

anpassa sig:

  • Justera enskilda objekt vertikalt inom dess cell.
  • Värden kan vara start, slut, center och stretch. 
.grid-item-1 {
align-self: end;
}

Denna kod anpassas Rutnätsobjekt 1 till botten av sin cell.

Kombinera och anpassa gärna dessa egenskaper för att skapa den layout och utseende du vill ha för varje grid-objekt i ditt CSS Grid.

Skapa responsiva layouter med hjälp av CSS-rutnät

Använda CSS-rutnät för skapa responsiva layouter är viktigt för att säkerställa att din webbsida anpassar sig sömlöst till olika skärmstorlekar och enheter. Du kan tillämpa dessa metoder:

  • Mediafrågor: Du kan använda mediafrågor att tillämpa olika rutnätslayouter beroende på skärmstorlekar. Du kan till exempel behöva ordna om rutnätsobjekt eller justera kolumnbredderna för mindre skärmar.
  • Flexibla enheter: Använd relativa enheter som procent och fr för att aktivera rutnätsobjekt och kolumner för att anpassas proportionellt till tillgängligt utrymme.
  • min Max(): Använd min Max() funktion för att ange ett intervall av storlekar för rutnätskolumner eller rader. Det säkerställer att föremål inte visas för små eller för stora på olika skärmar.

Kom ihåg att justera kolumner och andra element som luckor mellan rutnätsobjekt, teckenstorlekar och marginaler. Det säkerställer en konsekvent och väldesignad layout som fungerar bra på olika enheter.

Utforska möjligheterna med CSS Grid Layout

Genom att omfamna flexibiliteten och kraften i CSS-rutnätet kan du skapa layouter som inte bara ser bra ut utan även anpassar sig sömlöst till kraven från modern webbdesign. Så dyk in i nätens värld, utforska möjligheterna och höj dina färdigheter i webbutveckling.

När du fördjupar dig i layoutsystem kanske du vill jämföra andra layoutmetoder med CSS-rutnät. Du kan göra det med CSS Flexbox-modulen. Detta hjälper dig att lära dig att bestämma när du arbetar med ett projekt.