Bygg en blogg med rutenett og flexbox

Sep 11, 2025
hvordan
Build a blog with Grid and flexbox
[1. 3]

De siste to til tre årene har sett layout gå videre i sprang og grenser. Nå som disse moderne teknikkene har et så konsekvent resultat i moderne nettlesere, kan du virkelig bruke dem til produksjonskoden din. Hvis du lurer på Slik starter du en blogg , Denne opplæringen vil vise deg bare hvor enkelt det er å lage en standard blog-stil layout ved hjelp av CSS-rutenett og fleksibel boksemodul, AKA Flexbox. Lyd som for mye hardt arbeid for det du vil ha? Ta en titt på vår guide til beste gratis blogging plattformer eller velg en topp Nettstedbygger . Arbeider med et lag? Distribuere det beste skylagring for å holde prosessen jevn.

Først la oss raskt samle seg om det grunnleggende om HTML, og hvorfor det er godt å prøve å skrive semantisk kode.

Mer enn skrivebordet og mobilen

Har du lagt merke til lesermodus på Safari og Firefox? Det er et ikon i adresselinjen som ser litt ut som lined papir. Dette vil gjøre din Nettstedslayout I en distraheringsfri, bare biter modus, heller som enheter som Apple Watch bruk. Flere og flere enheter har tilgang til og vise webinnhold - muligens var den store hit på julen interaktive høyttalere som Amazon Echo.

Med disse i tankene, og selvfølgelig behovet for nettstedet ditt for å jobbe på skjermlesere og lignende, er strukturen på siden din avgjørende. Hvis du bare bruker & lt; div & gt; For alle dine beholdere og til og med knapper, vil enhetene som gjør koden din ikke vite hva konteksten er, og så kan ikke bruke noen av de opprinnelige funksjonene eller funksjonene.

01. Start grunnleggende sidelayout

Vi skal bygge en grunnleggende nettside for å inkludere en header med navigering, en heltblokk, hovedartikkel, utvalgte artikkelblokker og en bunntekst. Ideen her er å se mange Responsivt webdesign Teknikker vi kan implementere uten å bruke medieforespørsler eller et hvilket som helst assistent JavaScript. Du kan se at HTML på siden er delt inn i forskjellige seksjoner ved hjelp av HTML5-koder. Vi legger også til klasser til dem, da eldre nettlesere ikke vet hva de er og gjør dem som en div. La oss starte på toppen av siden og jobbe oss gjennom. Men grunnleggende eller komplisert nettstedet ditt, det er også på tide å tenke på hvilken Web Hosting. Tjenesten er riktig for deg.

02. Bygg en nettstedshode

Build a blog with Grid and flexbox: Site header

Du trenger ikke noen wrappers eller containere for denne overskriften

Overskriften til nettstedet inneholder en logo og en uordnet liste for navigasjonen. Vi trenger ikke å legge til noen wrappers eller beholdere for å legge dette ut med logoen til venstre og navigasjonen til høyre i en enkelt linje. 

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

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

03. Bruk FR-enheten

Vi setter overskriften for å vise rutenett, og deretter bruke 'Get-Template-Columns' Slik angir du to kolonner i overskriften. Vi bruker den funn Enhet her, som er en fraksjonell enhet - 1fr ville være tilgjengelig ledig plass i beholderen. I dette tilfellet gir vi navigasjonen et litt mindre område for å fylle. 

 header {
Vis: GRID;
Grid-Template-Columns: 1,5FR 1FR;
Justeringsartikler: Senter;
}

04. Legg til nettstednavigasjon

Nå retter vi oss mot listen over menyelementer. Igjen slår vi på & lt; ul & gt; inn i en rutenettbeholder og fortell elementene inne i autofit i kolonner. Her bruker vi minmax. For å sikre at kolonnene aldri kan være mindre enn 100px, men hvis plassen er større, kan de dele plassen som 1fr hver. 

 .nav {
Vis: GRID;
Grid-template-kolonner: Gjenta (Auto-Fit, MINMAX (100PX, 1FR));
Grid-Gap: 10px;
Justeringsartikler: Senter;
}

05. Lag helt blokk

Build a blog with Grid and flexbox: Hero block

Sentrering Helteksten er mye lettere med CSS-rutenett eller flex

Den neste delen av siden er den viktigste heltblokken. Tradisjonelt vertikalt sentreringstekst i en beholder kreves alle slags arbeidsplasser. Ved hjelp av CSS-rutenett eller flex, er dette veldig enkelt. 

 & lt; artikkel & gt;
& lt; § class = "helten" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / seksjon & gt;
& lt; / article & gt;

06. Juster til senteret

Justering på to akser er en del av brød og smør av CSS-rutenettet. Her kan vi snu heltenes beholderen i en rutenettbeholder og deretter bruke justere innholdet (venstre til høyre) og rettferdiggjør-innhold (topp til bunn) til posisjon i midten. Vi bruker en vh. Enhet her, som vil gjøre helten blokkere 50% av visningsporthøyden. 

 .hero {
Min-høyde: 50 VH;
Vis: GRID;
Justify-elementer: Senter;
Justerinnhold: Senter;
Justify-innhold: Senter;
}

07. Opprett hovedinnholdsseksjonen

Hovedartikkelen har også en blokk til høyre som inneholder videre lesing. For å gjøre dette lydhør uten å måtte bruke en medieøkning, kan vi bytte til FlexBox for å få mest mulig ut av sine egenskaper. 

 & lt; artikkel klasse = "hovedinnhold" & gt;
& lt; seksjon / & gt;
& lt; / seksjon & gt;
& lt; til side / & gt;
& lt; / article & gt;

08. Legg til en to-kolonnevisning

Sett artikkelen til en flexbeholder. Legg til litt polstring til venstre og høyre for å sikre at tekstens mål ikke blir for lenge. Flex-retningen er rad slik at delen og til side inne i vil sitte ved siden av hverandre når det er stylet. Innholdet er berettiget til mellomrom mellom slik at teksten ikke vil røre opp mot side. 

 Hovedinnhold {
Skjerm: Flex;
flex-wrap: wrap;
Flex-retning: rad;
rettferdiggjør-innhold: mellomrom mellom;
Padding: 0 5VW 0 5VW;}

09. Gjør det lydhør uten medieforespørsler

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

Opprett en responsiv seksjon uten å måtte bruke medieforespørsler

Seksjonen bruker en smart blanding av kalk- og minimums- og maksimumsbredder for å gi oss det som effektivt er et mediespørsmål, men på et beholdernivå. Når det er nok plass, vil delen ta opp 70% av foreldrene, slik at baksiden skal sitte ved siden av den. Ved å bruke Calc for bredden, kan vi returnere enten en stor eller liten bredde. 

 Hovedinnholdsdel {
Min-Bredde: 70%;
Bredde: Calc ((48em - 100%) * 1000);
Maks bredde: 100%;
}

10. Definer et bruddpunkt

48 EM tilsvarer 768px (48 * basis skriftstørrelse (16px)) så over 768px Seksjonen vil være dens minste bredde på 70% og under 768, den maksimale bredden vil bli brukt. Vi gjør det samme for side, så i dette tilfellet vil det enten ta opp 25% på store skjermer eller 100% på små. Effekten er et responsivt bruddpunkt som gjester beholderen. 

. Main-innholdet til side {
Min-Bredde: 25%;
Bredde: Calc ((48em - 100%) * 1000);
Maks bredde: 100%;
}

11. Bygg responsive blokker

Build a blog with Grid and flexbox: Responsive blocks

Bruk container divs til å bygge dine responsive blokker

For å lage de utvalgte elementene som går over siden, bruker vi endelig våre første container divs. 

 & lt; § class = "card-list" & gt;
& lt; div class = "kort" & gt;
& lt; img / & gt;
& lt; div class = "kort-detaljer" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / seksjon & gt;

12. Gjenta og autofit

For vår kortliste vil vi ha fire på rad, men fordi vi ikke bruker noen medieforespørsler, setter vi vår minmax. Verdi til 300px, som passer pent på en liten mobil. Ved å bruke gjenta og autofit gjør nettleseren det harde arbeidet og passer til hva det kan i en rad og deretter starte en annen, så vi kan gå fra fire til en enkelt kolonneoppsett med en linje med kode. 

 .Card-liste {
Vis: GRID;
Grid-Gap: 10px;
Grid-template-kolonner: Gjenta (Auto-Fit,
minmax (300px, 1fr));
}

.Card {
 Vis: GRID;
 Grid-mal-kolonner: 1fr;
}

13. Lag et kortoppsett

For detaljer i kortet bytter vi tilbake til flex, og setter strømmen til kolonnen, slik at elementene strømmer vertikalt. Sett rettferdiggjør-innhold Eiendom som passer - i dette tilfellet plass-jevnt fungerer fint. Fordi "A" -taggen i dette panelet vil vise blokk, ville det strekke bredden på beholderen. Sett den til flex-start slik at det bare tar opp plassen av innholdet. 

 .Card-detaljer {
Skjerm: Flex;
Flex-retning: kolonne;
rettferdiggjøre innhold: plass-jevnt;
}

.Card-detaljer A {
Justering selv: Flex-start;
}

14. Stil bunnteksten

Vi er nede på bunnteksten allerede, og vil bare ansette noen av stilene vi har brukt tidligere på å legge det ut. 

 & 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 = "sosial" & gt;
& lt; li / & gt;
lt; / ul & gt;
& lt; / footer & gt;

15. Juster barnets element

Det er tre områder i denne footeren. Sett rutenettkolonnene dine for å gjenta tre på en fraksjonell enhet hver. Du kan bare skrive "grid-template-kolonner: 1fr 1fr 1fr;" hvis du foretrekker. De sosiale ikonene kommer til å sitte til høyre - du kan gjøre dette ved å fortelle at varen selv skal justere høyre ved hjelp av rettferdiggjør-selv . 

 .footer {
Vis: GRID;
Grid-template-kolonner: Gjenta (3, 1fr);
Grid-auto-flow: kolonne;
Justeringsartikler: Senter;
}

.sosial {
rettferdiggjør selv: ende;
}

16. Vurder kompatibilitet

Selv om denne opplæringen fungerer bra over de store tre nettleserne og moderne enheter, har det ikke blitt testet tilbake til IE. Avhengig av prosjektet ditt, kan du bruke progressiv forbedring og servere et enkelt layout. Hvis din CSS er opprettet ved hjelp av en preprocessor som Sass, gir AutoPrefixer-pakken noen av de ekstra prefiksler som trengs for som kant.

Denne artikkelen ble opprinnelig publisert i utgave 284 av Creative Web Design Magazine Webdesigner . Kjøp problem 284 her eller Abonner på webdesigner her .

Relaterte artikler:

  • En omfattende guide til å bruke CSS-nett
  • Bruk CSS-rutenett og flexbox til å bygge et responsivt grensesnitt
  • 5 kule CSS-gridgeneratorer

hvordan - Mest populære artikler

Hvordan rengjør pensler: Den endelige veiledningen

hvordan Sep 11, 2025

[1. 3] (Bilde Kreditt: Sonny Flanaghan) Lære å rengjøre pensler riktig er en viktig ferdighet. Som det sier: Hvis d..

Bruk chart.js for å slå data til interaktive diagrammer

hvordan Sep 11, 2025

[1. 3] Side 1 av 2: Bruke Chart.js: Trinn 01-10 Bruke Chart.js: Trinn 01-1..

Hvordan lage et videospillkarakter i Zbrush

hvordan Sep 11, 2025

[1. 3] Her snakker jeg om prosessen med å skape Rey, et tegn som jeg laget for den menneskelige utfordringen på Artstation. Jeg ..

Forstå Unity Asset Import Pipeline

hvordan Sep 11, 2025

[1. 3] Enhet er en av verdens mest populære spillmotorer, som er ansvarlig for å drive hundrevis av tusenvis av spill over hele ..

Mal en sci-fi-spillinnstilling i Photoshop

hvordan Sep 11, 2025

[1. 3] Jeg har alltid trodd at originaliteten er funnet et sted mellom det du liker og hva du observerer. Jeg elsker å blande sci..

Hvordan lage fantastiske effekter med CSS-former

hvordan Sep 11, 2025

[1. 3] Frontend utviklere har en tendens til å tenke i rektangler; rektangler inne i rektangler inne i rektangler inne i rektangl..

Slik smelter du et 3D-objekt med tre.js

hvordan Sep 11, 2025

[1. 3] Internett som vi vet det, er stadig forandring og evolusjonerende. Det vi fortsatt kan huske som et enkelt og grei medium f..

Slik bruker du arkivfotografering kreativt i ditt designarbeid

hvordan Sep 11, 2025

[1. 3] I stedet for å være en siste utvei, kan lagerbilder og bør danne en viktig del av ditt kreative arsenal. Fra lagervektor..

Kategorier