Costruisci un blog con griglia e flexbox

Sep 16, 2025
Come si fa
Build a blog with Grid and flexbox

Gli ultimi due o tre anni hanno visto il layout andare avanti a passi da gigante e limiti. Ora che queste tecniche moderne hanno un risultato così coerente nei browser moderni, puoi davvero usarli per il tuo codice di produzione. Se ti stai chiedendo Come iniziare un blog , questo tutorial ti mostrerà quanto è semplice creare un layout in stile Blog standard utilizzando la griglia CSS e il modulo Box flessibile, AKA FlexBox. Sembra troppo duro lavoro per quello che vuoi? Dai un'occhiata alla nostra guida al Le migliori piattaforme di blogging gratuite o scegliere una cima Builder del sito web . Lavorando con una squadra? Distribuire il meglio deposito cloud. per mantenere il processo liscio.

Per prima cosa riprendiamo rapidamente le basi dell'HTML e perché è bene provare a scrivere codice semantico.

Più del desktop e del cellulare

Hai notato la modalità Reader su Safari e Firefox? È un'icona nella barra degli indirizzi che sembra un po 'come la carta foderata. Questo renderà il tuo Layout del sito web In una modalità Bare Bare Bones, priva di distrazioni, piuttosto come dispositivi come l'uso di Apple Watch. Sempre più dispositivi stanno accedendo e visualizzando il contenuto Web - forse il grande successo di Natale è stato altoparlanti interattivi come l'Echo Amazon.

Con questi in mente, e ovviamente la necessità del tuo sito lavora su schermi e simili, la struttura della tua pagina è cruciale. Se usi solo & lt; div & gt; Per tutti i tuoi contenitori e anche i pulsanti, i dispositivi che rendono il tuo codice non sapranno quale sia il contesto, e quindi non è possibile utilizzare alcuna funzione o funzionalità native.

01. Avvia il layout di base della pagina

Costruiremo una pagina web di base per includere un'intestazione con la navigazione, un blocco di eroe, un articolo principale, presentava blocchi di articoli in evidenza e un piè di pagina. L'idea qui è vedere molti web design reattivo Tecniche che possiamo implementare senza utilizzare le query dei supporti o qualsiasi assistente JavaScript. È possibile vedere che l'HTML della pagina è diviso in sezioni distinte utilizzando tag HTML5. Aggiungiamo anche lezioni a loro, poiché i browser più vecchi non sapranno cosa sono e li rendono come div. Iniziamo in cima alla pagina e facciamola la strada. Comunque fondamentale o complesso il tuo sito, è anche il momento di pensare a quali web hosting Il servizio è giusto per te.

02. Costruisci un intestazione del sito

Build a blog with Grid and flexbox: Site header

Non avrai dei conduttori o dei contenitori per questo intestazione

L'intestazione del sito contiene un logo e un elenco non ordinato per la navigazione. Non abbiamo bisogno di aggiungere alcun involucro o contenitori per licenziarlo con il logo a sinistra e la navigazione a destra in una singola riga. 

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

& lt; img src = "immagini / logo.png" / & gt;
& lt; nav & gt;
& lt; ul; ul massima classe = "nav" e gt;
& lt; li & gt; & lt; a href = "#"
class = "attivo" e GT; Home & Lt; / A & GT; & Lt; / Li & GT;
& lt; li & gt; & lt; a href = "#" & gt; circa & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; i cani & 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. Usa l'unità FR

Impostiamo l'intestazione per visualizzare la griglia, quindi utilizzare 'Get-Template-Colonne' per impostare due colonne nell'intestazione. Noi usiamo il p Unità qui, che è un'unità frazionaria - 1FR uguagliare lo spazio disponibile nel contenitore. In questo caso stiamo dando la navigazione un'area leggermente più piccola da riempire. 

 header {
display: griglia;
Grid-modelli-colonne: 1.5FR 1FR;
Allinea-Articoli: Centro;
}

04. Aggiungi la navigazione del sito

Ora prendiamo riferimento all'elenco delle voci del menu. Di nuovo giriamo il & lt; UL & GT; in un contenitore di griglia e ritieni gli articoli all'interno dell'autofiti in colonne. Qui usiamo minimo Massimo Per garantire che le colonne non possano mai essere più piccole di 100 px, ma se lo spazio è più grande, possono condividere lo spazio come 1FR ciascuno. 

 .nav {
display: griglia;
Grid-modelli-colonne: ripetizione (Auto-fit, Minmax (100px, 1fr));
Grid-Gap: 10 px;
Allinea-Articoli: Centro;
}

05. Crea un blocco Hero

Build a blog with Grid and flexbox: Hero block

Centratura del testo dell'eroe è molto più facile con la griglia CSS o il flex

La parte successiva della pagina è il blocco dell'eroe principale. Il testo di centraggio tradizionalmente verticalmente in un contenitore ha richiesto ogni sorta di lavoro. Usando Grid o Flex CSS, questo è davvero semplice. 

 & lt; Articolo e GT;
& lt; sezione class = "eroe" e gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; P & GT; & lt; / P & GT;
& lt; un href = "" & gt; & lt; / A & GT;
& lt; / sezione e GT;
& lt; / Article & GT;

06. Allinea al centro

Allineamento su due assi è una parte del pane e del burro della griglia CSS. Qui, possiamo trasformare il contenitore dell'eroe in un contenitore di griglia e quindi utilizzare allinea-content. (da sinistra a destra) e giustificazione-contenuto (dall'alto verso il basso) per posizionare al centro. Stiamo usando a vh. Unità qui, che renderà l'eroe il blocco del 50% dell'altezza della vista. 

 .hero {
Altezza minima: 50 VH;
display: griglia;
Giustificazione-Articoli: Centro;
Allinea-Content: Center;
Giustificazione-Contenuto: Centro;
}

07. Creare la sezione del contenuto principale

L'articolo principale ha anche un blocco a destra che contiene ulteriori letture. Per rendere questo reattivo senza dover utilizzare una query multimediale, possiamo passare a Flexbox per sfruttare al massimo le sue proprietà. 

 & lt; Article Class = "Contenuto principale" e GT;
& lt; Sezione / & GT;
& lt; / sezione e GT;
& lt; a parte / & gt;
& lt; / Article & GT;

08. Aggiungi una vista a due colonne

Imposta l'articolo su un contenitore Flex. Aggiungi un po 'di imbottitura a sinistra ea destra per assicurarti che la misura del testo non diventi troppo a lungo. La direzione flessibile è riga in modo che la sezione e da parte interra Il contenuto è giustificato nello spazio tra in modo che il testo non ritocco contro di lato. 

 Contenuto principale {
Display: flex;
Flex-wrap: wrap;
Flex-Direction: Row;
giustificazione-contenuto: spazio-mezzo;
Imbottitura: 0 5 VW 0 5VW;}

09. renderlo reattivo senza query multimediali

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

Creare una sezione reattiva senza dover utilizzare le query dei supporti

La sezione utilizza un mix intelligente di calc e larghezze minime e massime per darci cosa è efficacemente una query multimediale ma a livello di container. Quando c'è abbastanza spazio la sezione richiederà il 70% del genitore, consentendo da parte di sedersi a fianco. Usando Calc per la larghezza, possiamo restituire una larghezza enorme o minuscola. 

 Sezione del contenuto principale {
Min-Larghezza: 70%;
Larghezza: CALC ((48EM - 100%) * 1000);
larghezza massima: 100%;
}

10. Definire un punto di interruzione

48EM equivale a 768 px (dimensioni del carattere di base a 48 * (16px)) così sopra 768 px La sezione sarà la sua larghezza minima del 70% e inferiore a 768 verrà utilizzata la larghezza massima. Facciamo lo stesso per ACQUISTA, quindi in questo caso occupererà il 25% su grandi schermi o il 100% su piccolo. L'effetto è un punto di interruzione reattivo che influisce puramente sul contenitore. 

. Main-contenuto da parte {
Min-Larghezza: 25%;
Larghezza: CALC ((48EM - 100%) * 1000);
larghezza massima: 100%;
}

11. Costruisci blocchi reattivi

Build a blog with Grid and flexbox: Responsive blocks

Utilizza i div del contenitore per costruire i tuoi blocchi reattivi

Per creare gli elementi in primo piano che attraversano la pagina, finalmente usiamo i nostri primi div per contenitori. 

 & lt; section class = "card-list" & gt;
& lt; div class = "card" & gt;
& lt; img / & gt;
& lt; div class = "carta-dettagli" e gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / Sezione & GT;

12. Ripeti e autofit

Per la nostra lista delle carte vogliamo avere quattro di fila, ma perché non stiamo usando alcuna query dei supporti che abbiamo impostato il nostro minimo Massimo Valore a 300 px, che si adatta bene a un piccolo cellulare. Utilizzando ripetizione e autofit il browser fa il duro lavoro e si adatta a ciò che può in una riga e quindi avviando un altro, quindi possiamo passare da quattro a un layout di colonna singola con una riga di codice. 

 .card-list {
display: griglia;
Grid-Gap: 10 px;
Grid-Template-Columns: Ripeti (Auto-Fit,
Minmax (300 px, 1FR));
}

.carta {
 display: griglia;
 Grid-modelli-colonne: 1FR;
}

13. Creare un layout della carta

Per i dettagli nella scheda torniamo a Flex, impostando il flusso in colonna in modo che gli elementi flino verticalmente. Impostare il giustificazione-contenuto proprietà per adattarsi - in questo caso spazio-uniformemente funziona bene. Poiché il tag "A" in questo pannello mostrerà il blocco, allungherebbe la larghezza del contenitore. Impostalo Flex-Start. In modo che occupa solo lo spazio del suo contenuto. 

.estremi della carta {
Display: flex;
Flex-Direction: colonna;
Giustificazione-Contenuto: spazio-uniformemente;
}

.card-Details A {
Align-Self: Flex-Start;
}

14. Stile il piè di pagina

Siamo già giù al footer, e impieghiamo solo alcuni degli stili che abbiamo usato prima per stenderlo. 

 & lt; footer class = "piè di pagina" e GT;
& lt; P / & GT;
& lt; nav & gt;
& lt; ul; ul massima classe = "nav" e gt;
& lt; li / & gt;
& lt; / UL & GT;
& lt; / nav & gt;
& lt; ul; ul massima classe = "social" e GT;
& lt; li / & gt;
& lt; / UL & GT;
& lt; / footer & gt;

15. Allinea l'oggetto figlio

Ci sono tre aree in questo piè di pagina. Imposta le colonne della griglia per ripetere tre in un'unica unità frazionaria ciascuna. Potresti semplicemente scrivere 'grid-modelli-colonne: 1FR 1FR 1FR;' se preferisci. Le icone sociali si siedono allineate a destra - puoi farlo dicendo l'oggetto stesso di allineare il giusto usando giustificabile-sé . 

 .Footer {
display: griglia;
Grid-modelli-colonne: ripetizione (3, 1FR);
Grid-Auto-flow: colonna;
Allinea-Articoli: Centro;
}

.Social {
giustificabile: fine;
}

16. Considera la compatibilità

Sebbene questo tutorial funzioni bene attraverso i grandi tre browser e i dispositivi moderni, non è stato testato a IE. A seconda del progetto, è possibile utilizzare un miglioramento progressivo e servire un semplice layout. Se il tuo CSS viene creato utilizzando un preprocessore come Sass, il pacchetto AUTOPREFIXer fornisce alcuni dei prefissi extra necessari per i Like Of Edge.

Questo articolo è stato originariamente pubblicato in questione 284 di creative Web Design Magazine Web designer . Comprare il problema 284 qui o Iscriviti al web designer qui .

Articoli Correlati:

  • Una guida completa per usare la griglia CSS
  • Utilizzare la griglia CSS e Flexbox per costruire un'interfaccia reattiva
  • 5 Generatori di griglia Cool CSS

Come si fa - Articoli più popolari

Come fermare gli occhiali da annebbiamento quando indossa una maschera viso

Come si fa Sep 16, 2025

(Immagine di immagine: Getty Images) Se i tuoi occhiali continuano a fogging quando indossi una maschera per il viso,..

Come costruire un blog con Jekyll

Come si fa Sep 16, 2025

(Credito immagine: rete) Questo tutorial è per le persone che hanno sentito parlare dei generatori di siti statici e..

10 modi per costruire migliori ambienti mondiali 3D

Come si fa Sep 16, 2025

[Immagine: Albert Valls Punsich] Se vuoi rimanere in cima al tuo gioco come artista 3D, è importante risuonare le tu..

Lavoro maschera maschera magica con Houdini

Come si fa Sep 16, 2025

Se sei interessato a saperne di più su Houdini, assicurati di partecipare a New York (24-25 aprile). Alla conferenza, è po..

10 regole per creare moduli Web intuitivi

Come si fa Sep 16, 2025

Nonostante l'evoluzione dell'interazione umana-computer, le forme rimangono ancora uno dei tipi più importanti di interazione pe..

Creare e animare Poligoni SVG

Come si fa Sep 16, 2025

In questo tutorial creeremo una gamma di immagini dai triangoli SVG e impostare una transizione animata da un'immagine a un altro..

4 semplici passaggi per migliorare il tuo rendering

Come si fa Sep 16, 2025

L'uso di luci a cupola è stato uno dei maggiori progressi della creazione CGI negli ultimi decenni. Bagnare una scena da ogni di..

Crea cornici di stile in Photoshop

Come si fa Sep 16, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Categorie