Sestavte blog s mřížkou a flexboxem

Sep 12, 2025
jak
Build a blog with Grid and flexbox

Poslední dva až tři roky viděly rozložení pohybu vchodem v míchech a mezích. Nyní, když tyto moderní techniky mají tak konzistentní výsledek v moderních prohlížečích, můžete je opravdu používat pro váš výrobní kód. Pokud se zajímáte Jak začít blog , Tento výukový program vám ukáže, jak jednoduché je vytvořit standardní rozvržení stylu blogu pomocí CSS mřížky a flexibilní box modulu, AKA FlexBox. Zní to jako příliš mnoho tvrdé práce za to, co chcete? Podívejte se na náš průvodce Nejlepší platformy zdarma blogování nebo zvolte nahoru Webové stránky Builder. . Práce s týmem? Nasadit to nejlepší cloudové úložiště udržet proces hladký.

Nejprve se rychle dostaneme na základy HTML a proč je dobré zkusit psát sémantický kód.

Více než stolní a mobilní telefon

Všimli jste si režimu čtenáře na Safari a Firefox? Je to ikona v adresním řádku, který vypadá trochu jako linkovaný papír. To vykresne vaše rozložení webových stránek V režimu bez rozptýlení, holých kosti, spíše jako zařízení, jako jsou použití Apple Watch. Další a více zařízení přistupují a zobrazují webový obsah - možná velký hit Vánoce byly interaktivní reproduktory jako Amazon Echo.

S tímto na mysli, a samozřejmě potřebu vašich stránek pracovat na čtečkách obrazovky a podobně, struktura vaší stránky je klíčová. Pokud používáte & lt, div a gt; Pro všechny vaše kontejnery a dokonce i tlačítka pak zařízení vykreslí váš kód, nebude vědět, co kontext je, a tak nemůže použít některou z nativní funkce nebo funkcí.

01. Spusťte základní rozložení stránky

Budeme vybudovat základní webovou stránku, abychom zahrnuli záhlaví s navigací, hrdinovým blokem, hlavní článek, představoval bloky výrobku a zápatí. Myšlenka je vidět mnoho Reagovat web design Techniky můžeme implementovat bez použití mediálních dotazů nebo jakýkoliv pomocný JavaScript. Můžete vidět, že html stránky je rozdělen do odlišných úsecích pomocí značek HTML5. Také přidáváme kurzy k nim, protože starší prohlížeče nebudou vědět, co jsou a činí je jako div. Začněme v horní části stránky a pracovat přes. Nicméně základní nebo složité vaše stránky, je také čas přemýšlet o tom, který web hosting Služba je pro vás správná.

02. Vybudujte záhlaví webu

Build a blog with Grid and flexbox: Site header

Pro tuto záhlaví nebudete potřebovat žádné obaly ani kontejnery

Záhlaví webu obsahuje logo a neuspořádaný seznam pro navigaci. Nepotřebujeme přidat žádné obaly ani kontejnery, abychom to vyložili s logem doleva a navigace vpravo v jediném řádku. 

 & lt; třída záhlaví = "záhlaví" & gt;

& lt; img src = "obrázky / logo.png" / & gt;
& lt, nav & gt;
& lt; ul třídy = "NAV" & gt;
& lt, li & gt; & lt; a href = "#"
třída = "aktivní" & gt; home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; asi

03. Použijte jednotku FR

Nastavili jsme záhlaví k zobrazení mřížky, pak použijte 'Get-šablony-sloupce' Nastavení dvou sloupců v záhlaví. Používáme fr. Jednotka zde, která je zlomková jednotka - 1FR by se rovná dostupnému prostoru v kontejneru. V tomto případě dodáváme navigaci mírně menší oblast k vyplnění. 

 záhlaví {
Displej: mřížka;
mřížkové šablony - sloupce: 1.5fr 1fr;
Zarovnat předměty: Centrum;
}

04. Přidat navigaci webu

Nyní se zaměřujeme na seznam položek menu. Opět otočíme & lt; ul & gt; do nádoby s mřížkou a řekněte položky uvnitř do automatického zapnutí do sloupců. Zde používáme minmax. Aby se zajistilo, že sloupce nemohou být nikdy menší než 100px, ale pokud je prostor větší, pak mohou sdílet prostor jako 1fr. 

 .NAV {
Displej: mřížka;
Sloupcové šablony mřížky: Opakování (Auto-Fit, Minmax (100px, 1fr));
Grid-Gap: 10px;
Zarovnat předměty: Centrum;
}

05. Vytvořit hrdinový blok

Build a blog with Grid and flexbox: Hero block

Centrování textu hrdiny je mnohem snazší s CSS mřížkou nebo flex

Další část stránky je hlavní hrdina. Tradičně vertikálně centrování textu v kontejneru vyžadovalo všechny druhy pracovních míst. Použití mřížky CSS nebo flex, to je opravdu jednoduché. 

 & lt; článek & gt;
& lt; třída sekce = "hrdina" & gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; a href = "" & gt; & lt; / a & gt;
& lt; / sekce & gt;
& lt; / článek & gt;

06. Zarovnejte se do centra

Sladění na dvou osách je součástí chleba a másla CSS mřížky. Zde můžeme otočit kontejner hrdiny do nádoby a pak použít Zarovnat obsah (vlevo doprava) a ospravedlnit-obsah (shora dolů) do polohy ve středu. Používáme a vh. Jednotka zde, která bude dělat hrdina blokovat 50% výšky výřezu. 

. Ghero {
Min-výška: 50VH;
Displej: mřížka;
Ostatní položky: Centrum;
Zarovnat obsah: Centrum;
ospravedlnit-obsah: centrum;
}

07. Vytvořit hlavní část obsahu

Hlavní článek má také blok vpravo, který obsahuje další čtení. Aby bylo možné tuto citlivou, aniž byste museli využít mediálního dotazu, můžeme přepnout do aplikace FlexBox, aby co nejvíce z jeho vlastností. 

 & lt; třída článku = "hlavní obsah" & gt;
& lt; sekce / gt;
& lt; / sekce & gt;
stranou; stranou / a gt;
& lt; / článek & gt;

08. Přidat zobrazení dvou sloupců

Nastavte článek do kontejneru FLEX. Přidejte trochu polstrování vlevo a vpravo, abyste se ujistili, že měřítko textu nedostane příliš dlouho. Směr flex je řádek tak, že sekce a stranou bude sedět vedle sebe, když jsou stylizováni. Obsah je odůvodněn prostorem mezi tím, že text se proti straně nedotkne. 

 Hlavní obsah {
Displej: Flex;
Flex-Wrap: Wrap;
Flex-Směr: řada;
zdůvodnit obsah: prostor mezi;
Polstrování: 0 5VW 0 5VW;}

09. Udělejte to reagovat bez médií dotazů

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

Vytvořte citlivou sekci, aniž byste museli používat média

Sekce používá chytrou směs CACK a minimální a maximální šířky, která nám poskytne, co je účinně mediální dotaz, ale na úrovni kontejneru. Když je dostatek místa, bude sekce zabírat 70% rodiče, což umožňuje stranu sedět vedle ní. Pomocí funkce Calc pro šířku můžeme vrátit buď obrovskou nebo malou šířku. 

 Sekce Hlavního obsahu {
Min-šířka: 70%;
Šířka: Calc (48em - 100%) * 1000);
max-šířka: 100%;
}

10. Definujte bod zlomu

48em se rovná 768px (48 * velikost písma (16PX)), takže nad 768px bude sekce jeho minimální šířka 70% a pod 768 bude použita maximální šířka. Děláme totéž pro stranu, takže v tomto případě bude buď zaujmout 25% na velkých obrazovkách nebo 100% na malé. Účinek je citlivý bod zlomu čistě ovlivňující nádobu. 

.
Min-šířka: 25%;
Šířka: Calc (48em - 100%) * 1000);
max-šířka: 100%;
}

11. Sestavte citlivé bloky

Build a blog with Grid and flexbox: Responsive blocks

Použijte kontejner Divs pro vytvoření reagujících bloků

Chcete-li vytvořit vybrané položky, které běží přes stránku, konečně používáme naše první kontejner Div. 

 & lt; třída sekce = "Seznam karet" & gt;
& lt; dig class = "card" & gt;
& lt; img / gt;
& lt; dig class = "karetní detaily" & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / sekce & gt;

12. Opakujte a autoxus

Pro náš seznam karet chceme mít čtyři v řadě, ale proto, že nepoužíváme žádné mediální dotazy, které jsme nastavili naše minmax. Hodnota na 300px, která se dobře hodí na malém mobilu. Používáním opakování a automatického vybavení prohlížečem dělá tvrdou práci a bude vhodný, co může do řady a pak spustit další, takže můžeme jít od čtyř až do jediného sloupce rozložení s jedním řádkem kódu. 

 .Card-list {
Displej: mřížka;
Grid-Gap: 10px;
Sloupce šablony mřížky: opakování (auto-fit,
Minmax (300px, 1fr);
}

.Kartu {
 Displej: mřížka;
 Sloupce mřížky: 1FR;
}

13. Vytvořte rozložení karty

Pro detaily na kartě přepínáme zpět k ohybu, nastavení průtoku do sloupce, takže položky proudění vertikálně. Nastav ospravedlnit-obsah majetek na oblek - v tomto případě Space-rovnoměrně funguje dobře. Protože "A" značka v tomto panelu se zobrazí blok, protáhlo by šířku kontejneru. Nastavte to FLEX-START. Takže to zabírá pouze prostor svého obsahu. 

 .Card-detaily {
Displej: Flex;
Flex-Směr: sloupec;
zdůvodnit obsah: prostorově rovnoměrně;
}

.card-detaily a {
ALIGN-JOW: FLEX-START;
}

14. Styl zápatí

Jsme již na zápatí již, a bude jen zaměstnat některé ze stylů, které jsme použili dříve, abychom ho mohli položit. 

 & lt, zápatí třídy = "zápatí" & gt;
& lt; p / gt;
& lt, nav & gt;
& lt; ul třídy = "NAV" & gt;
& lt; li / gt;
& lt; / ul & gt;
& lt; / NAV & GT;
& lt; ul třídy = "sociální" & gt;
& lt; li / gt;
& lt; / ul & gt;
& lt; / zápatí & gt;

15. Zarovnejte dětskou položku

V této zápatí jsou tři oblasti. Nastavte sloupce mřížky, abyste opakovali tři na jedné frakční jednotce. Můžete jen napsat "mřížkové šablony-sloupce: 1fr 1fr 1fr; Pokud preferujete. Sociální ikony budou sedět zarovnány vpravo - můžete to udělat tím, že vyprávíte samotnou položku tak, aby sladit správně ospravedlnit-self. . 

 .footer {
Displej: mřížka;
Sloupce šablony mřížky: opakování (3, 1FR);
Mřížka-auto-tok: sloupec;
Zarovnat předměty: Centrum;
}

.Social {
ospravedlnit-self: konec;
}

16. Zvažte kompatibilitu

Ačkoli tento tutoriál funguje dobře přes velké tři prohlížeče a moderní zařízení, nebylo testováno zpět do IE. V závislosti na vašem projektu můžete použít progresivní vylepšení a sloužit jednoduchému uspořádání. Pokud je vaše CSS vytvořena pomocí preprocesor, jako je Sass, pak balíček AutoPrefixer poskytuje některé z přídavných předpon potřebných pro ráda hrany.

Tento článek byl původně publikován v čísle 284 časopisu Creative Web Design Web Designer. . Prodám vydání 284 zde nebo Přihlásit se zde web designer zde .

Související články:

  • Komplexní průvodce používáním mřížky CSS
  • Použijte CSS mřížku a FlexBox vybudovat citlivé rozhraní
  • 5 Cool CSS Grid generátory

jak - Nejoblíbenější články

Jak používat gravitaci skica

jak Sep 12, 2025

(Image Credit: Gravitace skica) Gravitace Skica, návrhový a modelovací nástroj pro VR kreativy, pokračoval v zá..

Použijte negativní prostor pro kreslení lepších rukou

jak Sep 12, 2025

Dokonce i zdánlivě složitý proces, jako je kreslení ruku, lze zjednodušit, s pravými technikami kreslení a triky. Použit..

Jak připravit soubor pro tisk

jak Sep 12, 2025

Jako umělecká díla Wieden + Kennedy. Londýn, I. Design pro tisk. pravidelně. Existují určit�..

Vytvořte 3D krajinu v 6 jednoduchých krocích

jak Sep 12, 2025

Vytvoření kusu 3D umění S přirozenou krajinou se může zdát jako výzva, ale pokud používáte správné n..

Připravte si desku pro malování ve 3 jednoduchých krocích

jak Sep 12, 2025

Budu sdílet nejrychleji Malířská technika Používám pro "gessoing" panel a dostat hladký povrch. Tento ..

Jak vytvořit digitální aktiva

jak Sep 12, 2025

Příprava aktiv pro digitální použití je základním úkolem Junior Návrháři Dnes - a odlišný od ..

Jak nakreslit mokré obrázek

jak Sep 12, 2025

Chcete-li malovat postavu, která vypadá věrně mokrý, vyžaduje, abyste vezměte v úvahu řadu faktorů - klíčem je typ tk..

Mock Up AR grafika s After Effects

jak Sep 12, 2025

Po účincích mají některé mocné nástroje, které můžeme použít k napodobenému rozšířené realitě. Můžete najít to nezbytné, pokud jste například chtěli udělat si hři�..

Kategorie