Bygg en blogg med rutnät och Flexbox

Feb 2, 2026
Hur
Build a blog with Grid and flexbox

De senaste två till tre åren har sett layout gå vidare i språng. Nu när dessa moderna tekniker har ett så konsekvent resultat i moderna webbläsare, kan du verkligen använda dem för din produktionskod. Om du undrar Hur man startar en blogg , den här handledningen visar dig hur enkelt det är att skapa en vanlig blogg-stil layout med CSS Grid och flexibel boxmodul, aka Flexbox. Låter som för mycket hårt arbete för vad du vill ha? Ta en titt på vår guide till Bästa gratis bloggplattformar eller välj en topp Website Builder . Arbetar med ett lag? Distribuera bäst molnlagring för att hålla processen smidig.

Först låt oss snabbt återkomma över grunderna i HTML och varför det är bra att försöka skriva semantisk kod.

Mer än skrivbord och mobil

Har du märkt läsarens läge på Safari och Firefox? Det är en ikon i adressfältet som ser lite ut som fodrad papper. Detta kommer att göra din Webbplatslayout I ett distraktionsfritt, nakna benläge, ganska som enheter som Apple Watch. Fler och fler enheter har tillgång till och visar webbinnehåll - möjligen den stora hit av jul var interaktiva högtalare som Amazon Echo.

Med dessa i åtanke, och naturligtvis behovet av din webbplats att arbeta på skärmläsare och liknande, är strukturen på din sida avgörande. Om du bara använder & lt; div & gt; För alla dina behållare och till och med knappar kommer enheterna att göra din kod inte veta vad kontextet är, och så kan inte använda någon av den ursprungliga funktionaliteten eller funktionerna.

01. Starta grundläggande sidlayout

Vi ska bygga en grundläggande webbsida för att inkludera en rubrik med navigering, ett hjälteblock, huvudartikel, presenterade artikelblock och en sidfot. Tanken är att se många Responsiv webbdesign Tekniker Vi kan implementera utan att använda medifrågor eller något assistent javascript. Du kan se att HTML på sidan är uppdelad i olika sektioner med hjälp av HTML5-taggar. Vi lägger också till klasser till dem, eftersom äldre webbläsare inte vet vad de är och gör dem som en div. Låt oss börja på toppen av sidan och arbeta oss igenom. Men grundläggande eller komplexa din webbplats är det också dags att tänka på vilket webbhotell Tjänsten är rätt för dig.

02. Bygg en platshuvud

Build a blog with Grid and flexbox: Site header

Du behöver inte några wrappers eller containrar för denna rubrik

Huvudet på webbplatsen innehåller en logotyp och en oorderad lista för navigeringen. Vi behöver inte lägga till några förpackningar eller behållare för att lägga ut det med logotypen till vänster och navigeringen till höger i en enda rad. 

 & lt; header class = "header" & gt;

& lt; img src = "bilder / logo.png" / & gt;
& lt; Nav & GT;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; a href = "#"
Klass = "Aktiv" & GT; Hem & LT; / A & GT; & LT; / Li & GT;
& lt; li & gt; & lt; a href = "#" & gt; / lt; / a & gt; & lt; / li & gt;
& LT; Li & GT; & LT; HREF = "#" & GT; Hundarna & LT; / A & GT; & LT; / Li & GT;
& lt; li & gt; & lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / header & gt;

03. Använd FR-enheten

Vi ställer in rubriken för att visa rutnätet, använd sedan "Get-mall-kolumner" för att ställa in två kolumner i rubriken. Vi använder fr Enhet här, som är en fraktionerad enhet - 1FR skulle motsvara det lediga utrymmet i behållaren. I det här fallet ger vi navigeringen ett något mindre område för att fylla. 

 Header {
Visa: Grid;
Grid-mall-kolumner: 1,5fr 1fr;
Justera: Center;
}

04. Lägg till navigering på plats

Nu riktar vi oss till listan över menyalternativ. Igen vänder vi & lt; ul & gt; in i en rutnätbehållare och berätta för föremålen inuti att autofunt i kolumner. Här använder vi min Max För att säkerställa att kolumnerna aldrig kan vara mindre än 100px, men om utrymmet är större kan de dela utrymmet som 1FR vardera. 

 .nav {
Visa: Grid;
Grid-mall-kolumner: upprepa (automatisk passform, minmax (100px, 1Fr));
Grid-gap: 10px;
Justera: Center;
}

05. Skapa hjälteblock

Build a blog with Grid and flexbox: Hero block

Centrera hjältexten är mycket lättare med CSS Grid eller Flex

Nästa sida av sidan är det största hjälteblocket. Traditionellt vertikalt centrerar text i en behållare alla slags arbetsplatser. Med hjälp av CSS-nät eller Flex är det verkligen enkelt. 

 & lt; artikel & gt;
& lt; avsnitt klass = "Hero" & GT;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; P & GT; & LT; / P & GT;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / sektion och gt;
& lt; / Artikel & GT;

06. Justera till mitten

Justering på två axlar är en del av brödet och smöret av CSS-nätet. Här kan vi vända hjältebehållaren till en rutnätbehållare och sedan använda anställningsinnehåll (vänster till höger) och rättfärdiga innehåll (topp till botten) för att placera i mitten. Vi använder en vh Enhet här, som kommer att göra hjälten block 50% av visningshöjden. 

 .HERO {
Min-höjd: 50VH;
Visa: Grid;
Rättfärdiga - Objekt: Centrum;
Justera innehåll: Center;
rättfärdiga innehåll: centrum;
}

07. Skapa huvudinnehållsavsnittet

Huvudartikeln har också ett block till höger som innehåller ytterligare läsning. För att göra detta mottagligt utan att behöva använda en mediefråga kan vi byta till Flexbox för att få ut det mesta av sina egenskaper. 

 & lt; artikelklass = "Huvudinnehåll" & GT;
& lt; avsnitt / & gt;
& lt; / sektion och gt;
& lt; åt sidan / & gt;
& lt; / Artikel & GT;

08. Lägg till en två-kolonnvy

Ställ artikeln till en flexbehållare. Lägg till lite vaddering åt vänster och höger för att se till att måttet på text inte blir för lång. Flex-riktningen är rad så att sektionen och åt sidan inom kommer att sitta bredvid varandra när de är stilade. Innehållet är motiverat att rymma mellan så att texten inte kommer att röra sig mot åt ​​sidan. 

 Huvudinnehåll {
Visa: Flex;
Flex-wrap: Wrap;
Flex-riktning: rad;
rättfärdiga innehåll: rymd mellan;
Padding: 0 5vw 0 5vw;}

09. Gör det responsivt utan medifrågor

Build a blog with Grid and flexbox: Responsive without media queries

Skapa en responsiv sektion utan att behöva använda medifrågor

Avsnittet använder en smart blandning av beräkning och minsta och maximala bredder för att ge oss det som är effektivt en mediafråga men på en behållarnivå. När det finns tillräckligt med utrymme kommer sektionen att ta upp 70% av föräldern, vilket möjliggör åt sidan att sitta bredvid den. Genom att använda Calc för bredden kan vi återvända antingen en enorm eller liten bredd. 

 Huvudinnehållsavsnitt {
Minbredd: 70%;
Bredd: Beräkna ((48EM - 100%) * 1000);
MAX-Bredd: 100%;
}

10. Definiera en brytpunkt

48EM motsvarar 768px (48 * basfontstorlek (16px)), så över 768px kommer sektionen att vara dess minsta bredd på 70% och under 768 kommer den maximala bredden att användas. Vi gör detsamma för åt sidan, så i det här fallet tar det antingen 25% på stora skärmar eller 100% på små. Effekten är en responsiv pauspunkt som påverkar behållaren. 

 .Main-healtside {
Minbredd: 25%;
Bredd: Beräkna ((48EM - 100%) * 1000);
MAX-Bredd: 100%;
}

11. Bygg responsiva block

Build a blog with Grid and flexbox: Responsive blocks

Använd Container Divs för att bygga dina responsiva block

För att skapa de presenterade objekten som körs över sidan, använder vi äntligen vår första behållare div. 

 & lt; avsnitt klass = "Kortlista" & GT;
& lt; div class = "kort" & gt;
& lt; img / & gt;
& lt; Div Class = "Kortuppgifter" & GT;
& lt; / div & gt;
& lt; / div & gt;
& lt; / avsnitt och GT;

12. Repetera och autofit

För vår kortlista vill vi ha fyra i rad, men eftersom vi inte använder några medifrågor ställer vi oss till min Max Värde till 300px, som passar snyggt på en liten mobil. Genom att använda upprepning och autofit gör webbläsaren det hårda arbetet och passar vad det kan i rad och sedan starta en annan, så vi kan gå från fyra till en enda kolumnlayout med en rad kod. 

 .Card-lista {
Visa: Grid;
Grid-gap: 10px;
Grid-mall-kolumner: upprepa (automatisk passform,
Minmax (300px, 1FR));
}

.Card {
 Visa: Grid;
 Grid-mall-kolumner: 1Fr;
}

13. Skapa en kortlayout

För detaljerna i kortet växlar vi tillbaka till Flex, ställer in flödet till kolumn så att objekten flyter vertikalt. Ställa in rättfärdiga innehåll egendom som passar - i det här fallet utrymme-jämnt funkar bra. Eftersom "en" tagg i den här panelen kommer att visa block, skulle det sträcka behållarens bredd. Ställa in flexstart så att det bara tar upp sitt innehåll. 

 .Card-detaljer {
Visa: Flex;
Flex-riktning: kolonn;
Rättfärdiga innehåll: Space-jämnt;
}

.Card-detaljer a {
Justera själv: Flex-Start;
}

14. Stil Footer

Vi är redan nere till sidfoten, och kommer bara att använda några av de stilar vi har använt tidigare på att lägga ut det. 

 & lt; Footer Class = "Footer" & GT;
& lt; p / & gt;
& lt; Nav & GT;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "Social" & GT;
& lt; li / & gt;
& lt; / ul & gt;
& LT; / Footer & GT;

15. Justera barnet

Det finns tre områden i denna sidfot. Ställ dina rutnätskolumner för att upprepa tre vid en fraktionerad enhet vardera. Du kan bara skriva "Grid-mall-kolumner: 1Fr 1FR 1FR;" om du föredrar. De sociala ikonerna kommer att sitta i linje med rätten - du kan göra det genom att säga varan själv att anpassa rätt med rättfärdiga . 

 .Footer {
Visa: Grid;
Grid-mall-kolumner: upprepa (3, 1Fr);
Grid-auto-flow: kolonn;
Justera: Center;
}

.Social {
rättfärdiga själv: slutet;
}

16. Tänk på kompatibilitet

Även om den här handledningen fungerar bra över de stora tre webbläsarna och moderna enheter, har det inte testats tillbaka till IE. Beroende på ditt projekt kan du använda progressiv förbättring och servera en enkel layout. Om din CSS skapas med hjälp av en preprocessor som SASS, ger Autoprefixer-paketet några av de extra prefix som behövs för liknande kant.

Den här artikeln publicerades ursprungligen i utgåva 284 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 284 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

  • En omfattande guide till att använda CSS-rutnät
  • Använd CSS Grid och FlexBox för att bygga ett responsivt gränssnitt
  • 5 COOL CSS Grid Generators

Hur - Mest populära artiklar

6 Snabba tips för att förbättra din penselpennritning

Hur Feb 2, 2026

(Bildkredit: Artem Solop) Jag har alltid strävat med att utveckla min personliga stil, en konstnärlig röst som tal..

Lägg till digitala färger till penna ritningar

Hur Feb 2, 2026

Klicka på bilden för att se den fullstorlek Jag är en stor fan av traditionella medie..

Hur man förbättrar din karaktärskonst

Hur Feb 2, 2026

När du har till uppgift att skapa en karaktär design Från början, tänk på den här personens personlighet. S..

Hur man målar realistiska vågor i Photoshop

Hur Feb 2, 2026

När du målar havsscener i Photoshop cc , som med de flesta av mina målningsprojekt, börjar jag med att samla några marina fotoreferenser, för att säkerställa att jag ha..

Skapa en animerad 3D-texteffekt

Hur Feb 2, 2026

Kärlek förlorad av Kanadas Jam3 Är en vackert mörk, mobil färdig interaktiv dikt med riktigt hjärta om de varaktiga..

Designa en responsiv plats med EM-baserad limning

Hur Feb 2, 2026

Du har nog hört att du ska använda relativa enheter för teckensnittstorlek. Detta är en bra regel för tillgänglig webbdesign; Om användaren ändrar sin webbläsares standardstorlek, g�..

Hemligheterna att uppfylla en kreativ design kort

Hur Feb 2, 2026

En av mina handledare berättade en gång för mig att om han var låst i fängelse för resten av sitt liv, med ingenting annat än en penna och papper, skulle han inte skriva en sak, förut..

Få kreativitet med porträtt och ansiktemedvetna vätska

Hur Feb 2, 2026

Vi har alla haft ett spel med Liquify-verktyget i Photoshop, men i den senaste iterationen av Photoshop CC, Adobe ..

Kategorier