Bygg en blogg med rutnät och Flexbox

Sep 16, 2025
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

Hur man storyboard i Photoshop

Hur Sep 16, 2025

(Bildkredit: Mark Evan Lim) Storyboarding i Photoshop kan vara ett bra sätt att få dina idéer mappade. I den här ..

Hur man lägger till energi till dina livs ritningar

Hur Sep 16, 2025

(Bildkredit: Patrick J Jones) I den här handledningen kommer jag att rita modell Katy för att visa dig hur jag anv�..

Hur man implementerar ljus eller mörka lägen i CSS

Hur Sep 16, 2025

CSS-specifikationen är ständigt utvecklat. Processen för att implementera nya funktioner i CSS är komplicerat, men den fören..

Skapa dynamisk rörelse i en komposition

Hur Sep 16, 2025

Innan du startar din ritning är det viktigt att bestämma vilken typ av rörelse du vill fånga. Försök att hålla det enkelt ..

Skapa fantastiska landskap i Houdini

Hur Sep 16, 2025

Genom att använda ett nodbaserat, procedurinställningar, 3D-programvara Houdini från SIDEFX ger digitala konstnärer med en an..

Hur man skapar en redshift-proxy i Cinema 4D

Hur Sep 16, 2025

Cinema 4D Det är bra på många saker, men det kan sakta ner när det har många föremål i scenen, vilket är ett ..

Hur man skapar hår i Cinema 4D

Hur Sep 16, 2025

Inspirerad av den fantastiska karaktären av Carlos Ortega Elizalde och Lois van Baarle, bestämde jag mig för att försöka min..

Hur man får din Zbrush-modell till Maya

Hur Sep 16, 2025

För detta Maya Tutorial Jag ska visa dig hur jag fick den här Grumpy Link-modellen från Zbrush till Maya för �..

Kategorier