Byg en blog med Gitter og Flexbox

Feb 9, 2026

hvordan

De sidste to til tre år har set layout bevæge sig fremad i spring og grænser. Nu hvor disse moderne teknikker har et sådant konsistent resultat i moderne browsere, kan du virkelig bruge dem til din produktionskode. Hvis du undrer dig over Sådan starter du en blog , Denne vejledning viser dig, hvor simpelt det er at skabe et standard blog-stil layout ved hjælp af CSS-gitter og fleksibelt boksmodul, AKA Flexbox. Lyde som for meget hårdt arbejde for hvad du vil have? Tag et kig på vores guide til Bedste gratis blogging platforme eller vælg en top Website Builder. . Arbejder med et hold? Implementere bedst Sky lagring for at holde processen glat.

Lad os først genoprette det grundlæggende i HTML og hvorfor det er godt at prøve og skrive semantisk kode.

Mere end desktop og mobil

Har du bemærket læsertilstanden på Safari og Firefox? Det er et ikon i adresselinjen, der ser lidt ud som ledet papir. Dette vil gøre din Website Layout. I en distraktionsfri, bare knogler mode, snarere som enheder som Apple Watch brug. Flere og flere enheder får adgang til og viser webindhold - muligvis det store hit af julen var interaktive højttalere som Amazon-ekkoet.

Med disse i tankerne, og selvfølgelig er behovet for dit websted at arbejde på skærmlæsere og lignende, strukturen på din side er afgørende. Hvis du bare bruger & lt; div & gt; For alle dine containere og lige knapper, så vil enhederne, der gengiver din kode, ikke ved, hvad konteksten er, og det kan derfor ikke bruge nogen af de indfødte funktionaliteter eller funktioner.

01. Start grundlæggende sidelayout

Vi skal bygge en grundlæggende webside for at inkludere et overskrift med navigation, en heltblok, hovedartikel, fremhævede artikelblokke og en sidefod. Ideen her er at se mange Responsive Web Design Teknikker, vi kan implementere uden at bruge medieforespørgsler eller Assistive JavaScript. Du kan se, at HTML'en på siden er opdelt i forskellige sektioner ved hjælp af HTML5-tags. Vi tilføjer også klasser til dem, da ældre browsere ikke ved, hvad de er, og gør dem som div. Lad os starte på toppen af siden og arbejde vores vej igennem. Men grundlæggende eller komplekse dit websted, er det også tid til at tænke over hvilke Web Hosting. Tjenesten er rigtig for dig.

02. Byg en webstedshoved

Build a blog with Grid and flexbox: Site header — Du behøver ikke nogen wrappers eller containere til denne overskrift

Overskriften på webstedet indeholder et logo og en uordnet liste til navigationen. Vi behøver ikke at tilføje nogen wrappers eller containere til at lægge dette ud med logoet til venstre og navigationen til højre i en enkelt linje.

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

& lt; img src = "billeder / logo.png" / & gt;
& lt; NAV & GT;
& lt; ul klasse = "nav" & gt;
& lt; li & gt; & lt; en href = "#"
klasse = "aktiv" & gt; hjem & lt; / a & gt; / li & gt;
& lt; li & gt; en href = "#" & gt; om & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; en href = "#" & gt; hundene & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; en href = "#" & gt; / li & gt; / li & gt;
& lt; / ul & gt;
& lt; / NAV & GT;
& lt; / header & gt;

03. Brug FR-enheden

Vi sætter overskriften til at vise gitter, og derefter bruge 'Get-template-kolonner' at indstille to kolonner i overskriften. Vi bruger Fr. Enhed her, som er en fraktioneret enhed - 1fr ville svare til det ledige rum i beholderen. I dette tilfælde giver vi navigationen et lidt mindre område for at udfylde.

 Header {
Display: Gitter;
Gitter-template-kolonner: 1,5 FFR 1FR;
Juster-elementer: Center;
}

04. Tilføj site navigation

Nu er vi rettet mod listen over menupunkter. Igen drejer vi & lt; ul & gt; ind i en gitterbeholder og fortæl elementerne inde for at autofit i kolonner. Her bruger vi MINMAX. For at sikre, at kolonnerne aldrig kan være mindre end 100px, men hvis rummet er større, så kan de dele pladsen som 1fr hver.

 .nav {
Display: Gitter;
Gitter-template-kolonner: Gentag (Auto-Fit, MINMAX (100PX, 1FR));
GRID-GAP: 10px;
Juster-elementer: Center;
}

05. Opret heltblok

Build a blog with Grid and flexbox: Hero block — Centrering af heltens tekst er meget lettere med CSS-grid eller flex

Den næste del af siden er den vigtigste heltblok. Traditionelt krævede vertikalt centreret tekst i en container alle mulige arbejdsområder. Brug CSS-grid eller flex, dette er virkelig simpelt.

 & lt; Artikel & GT;
& lt; sektion klasse = "helt" & gt;
& lt; h1 & gt; / lt; / h1 & gt;
& lt; P & GT; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / sektion & gt;
& lt; / artikel & gt;

06. Juster til midten

Justering på to akser er en del af brød og smør af CSS-nettet. Her kan vi vende helten beholderen i en gitterbeholder og derefter bruge Juster-indhold (venstre til højre) og retfærdiggøre-indhold (top til bund) til position i midten. Vi bruger en vh. Enhed her, som vil gøre helten blokere 50% af visningshøjden.

 .hero {
Min-højde: 50vh;
Display: Gitter;
retfærdiggøre-artikler: center;
Juster-indhold: Center;
retfærdiggøre-indhold: center;
}

07. Opret afsnittet Hovedindhold

Hovedartiklen har også en blok til højre, der indeholder yderligere læsning. For at gøre dette lydhør uden at skulle bruge en medieforespørgsel, kan vi skifte til Flexbox for at få mest muligt ud af dets egenskaber.

 & lt; Artikel Klasse = "Hovedindhold" & GT;
& lt; sektion / & gt;
& lt; / sektion & gt;
& lt; til side / & gt;
& lt; / artikel & gt;

08. Tilføj en to-kolonne visning

Indstil artiklen til en Flex Container. Tilføj lidt polstring til venstre og højre for at sikre, at målingen af tekst ikke bliver for lang. Flexretningen er række, så sektionen og til side indenfor vil sidde ved siden af hinanden, når den er stylet. Indholdet er berettiget til plads mellem, så teksten ikke vil røre op mod til side.

 Hovedindhold {
Display: Flex;
Flex-wrap: Wrap;
FLEX-DIRECTION: ROW;
retfærdiggør-indhold: mellemrum mellem;
Padding: 0 5VW 0 5VW;}

09. Gør det lydhør uden medieforespørgsler

Build a blog with Grid and flexbox: Responsive without media queries — Opret en lydhør sektion uden at skulle bruge medieforespørgsler

Sektionen bruger en smart blanding af calc og minimum og maksimale bredder for at give os, hvad der effektivt er en medie forespørgsel, men på et beholderniveau. Når der er nok plads, vil sektionen tage op på 70% af forældren, så det er muligt at sidde ved siden af det. Ved at bruge COX for bredden kan vi returnere enten en enorm eller lille bredde.

 Hovedindholdsafsnit {
Minbredde: 70%;
Bredde: Beregnet ((48em - 100%) * 1000);
Max bredde: 100%;
}

10. Definer et pausepunkt

48EM svarer til 768px (48 * BASE-skrifttypestørrelse (16px)) Så over 768px vil sektionen være dens mindste bredde på 70%, og under 768 vil den maksimale bredde blive brugt. Vi gør det samme for den til side, så i dette tilfælde vil det enten tage op på 25% på store skærme eller 100% på små. Effekten er et responsivt brudpunkt, der udelukkende påvirker beholderen.

 .main-content til side {
Minbredde: 25%;
Bredde: Beregnet ((48em - 100%) * 1000);
Max bredde: 100%;
}

11. Bygg responsive blokke

Build a blog with Grid and flexbox: Responsive blocks — Brug Container Divs til at opbygge dine responsive blokke

For at oprette de fremhævede elementer, der kører på tværs af siden, bruger vi endelig vores første container Divs.

 & lt; sektion klasse = "Kortliste" & GT;
& lt; div class = "kort" & gt;
& lt; img / gt;
& lt; div class = "kort-detaljer" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / sektion & gt;

12. Gentag og autofit

For vores kortliste vil vi have fire i træk, men fordi vi ikke bruger nogen medieforespørgsler, sætter vi vores MINMAX. Værdi til 300px, som passer pænt på en lille mobil. Ved at bruge Gentag og Autofit gør browseren det hårde arbejde og vil passe til, hvad det kan i en række og derefter starte en anden, så vi kan gå fra fire til et enkelt kolonne layout med en kode kode.

 .card-list {
Display: Gitter;
GRID-GAP: 10px;
Gitter-template-kolonner: Gentag (Auto-Fit,
MINMAX (300PX, 1FR));
}

.kort {
 Display: Gitter;
 Gitter-template-kolonner: 1fr;
}

13. Opret et kortlayout

For detaljerne i kortet skifter vi tilbage til Flex, indstiller strømmen til kolonne, så emnerne flyder lodret. Indstil retfærdiggøre-indhold Ejendom, der passer til - i dette tilfælde plads - jævnt fungerer godt. Fordi 'A' -koden i dette panel vil vise blok, ville det strække beholderens bredde. Sæt det til Flex-Start. så det kun tager plads på indholdet.

 .Card-detaljer {
Display: Flex;
FLEX-DIRECTION: Kolonne;
retfærdiggør-indhold: plads - jævnt;
}

.card-detaljer a {
Juster-selv: Flex-Start;
}

14. Stil footer

Vi er allerede nede til sidefoden, og vil bare ansætte nogle af de stilarter, vi har brugt tidligere på at lægge det ud.

 & lt; footer class = "footer" & gt;
& lt; p / & gt;
& lt; NAV & GT;
& lt; ul klasse = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / NAV & GT;
& lt; ul klasse = "social" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Juster barnets element

Der er tre områder i denne footer. Indstil dine gitterkolonner for at gentage tre på en fraktioneret enhed hver. Du kunne bare skrive 'Gitter-template-kolonner: 1 FRR 1FR 1FR;' Hvis du foretrækker det. De sociale ikoner vil sidde justeret til højre - du kan gøre dette ved at fortælle varen selv for at justere højre ved hjælp af retfærdiggøre-self. .

 .footer {
Display: Gitter;
Gitter-template-kolonner: Gentag (3, 1 Fr);
Gitter-auto-flow: kolonne;
Juster-elementer: Center;
}

. Social {
retfærdiggøre - selv: ende;
}

16. Overvej kompatibilitet

Selvom denne vejledning fungerer godt over de store tre browsere og moderne enheder, er det ikke blevet testet tilbage til IE. Afhængigt af dit projekt kan du bruge progressiv forbedring og servere et simpelt layout. Hvis din CSS er oprettet ved hjælp af en præprocessor som SASS, giver Autoprefixer-pakken nogle af de ekstra præfikser, der er nødvendige for kanten af kanten.

Denne artikel blev oprindeligt offentliggjort i udstedelse 284 af Creative Web Design Magazine Webdesigner . Køb problem 284 her eller Abonner på Web Designer her .

Relaterede artikler:

En omfattende vejledning til brug af CSS-grid
Brug CSS gitter og Flexbox til at opbygge en responsiv grænseflade
5 COOL CSS Gitter generatorer

Byg en blog med Gitter og Flexbox

Mere end desktop og mobil

01. Start grundlæggende sidelayout

02. Byg en webstedshoved

03. Brug FR-enheden

04. Tilføj site navigation

05. Opret heltblok

06. Juster til midten

07. Opret afsnittet Hovedindhold

08. Tilføj en to-kolonne visning

09. Gør det lydhør uden medieforespørgsler

10. Definer et pausepunkt

11. Bygg responsive blokke

12. Gentag og autofit

13. Opret et kortlayout

14. Stil footer

15. Juster barnets element

16. Overvej kompatibilitet

hvordan - Mest populære artikler

Sådan rengøres pensler: Den endelige vejledning

Portrætfotografi: Sådan tager du perfekte portrætter

7 Top Tips til at starte din egen virksomhed

Sådan ændres skrifttypen i din Twitter BIO

Sådan maler du farverig animationskunst i Photoshop

Sådan forbereder du illustratorgrafik til eftervirkninger

Master negativt maleri i akvarel

Udforsk kreativ kode med p5.js

Kategorier