Jak vytvořit komplexní uspořádání pomocí CSS

Sep 14, 2025
jak
Build complex CSS layouts

Rozložení pro web byl vždy omezen, tam opravdu nikdy nebylo nic skutečně oddaného pro vytvoření obsahu snadno zobrazení ve formátu, který dává smysl.

Zpět v 90. letech, kdy web nejprve vzali, designéři, kteří byli používáni k pokládání obsahu na mřížce, našli jediný způsob, jak získat stejný výsledek v prohlížeči, bylo použít tabulku. Sloučení buněk vedlo k složitému Rozložení webových stránek , ale to hrálo havoc s dostupností a SEO. Rychlý dopředu a dnes existuje všechny způsoby, jak umístit obsah s plováky, flexibilní boxy a tak dále.

CSS3 opravdu tlačil schopnosti webu dopředu a od roku 2014 byl Rozložení mřížky CSS . To má v současné době 75% podpory prohlížeče, takže je to dostat do okamžiku, kdy je čas dát vážně zvážení. Framework zurb's Foundation 6 má na palubu a používá to k napájení jeho mřížky.

Tento výukový program se zaměří na vytvoření funkce stylu zásobníku, která vám ukáže, jak dokončit Reagovat web design Pro střední a malé velikosti obrazovek.

Stáhněte si tutoriálové soubory zde

01. ZAČÁTEK.

Otevřete soubor 'Grid1.html' ze složky Start v Projektové soubory . Rozvržení HTML pro to má pět diváků, jednoduše pojmenované položky1-5 jako CSS třídy. Ty budou obsah umístěn do mřížky. Obal kontejneru bude definovat mřížku, která bude mít čtyři sloupce. 

 & lt; divá třída = "kontejner" & gt;
  & lt, divové třídy = "item11" & gt; položka 1 & lt; / div & gt;
  & lt; dig class = "item2" & gt; položka 2 & lt; / div & gt;
  & lt, divové třídy = "item3" & gt; položka 3 & lt; / div & gt;
  & lt, divová třída = "item4" & gt; položka 4 & lt; / div & gt;
  & lt, divová třída = "item5" & gt; bod 5 & lt; / div & gt;
& lt; / div & gt;

02. Zkontrolujte CSS pro mřížku

Při pohledu do sekce Head můžete vidět, že "kontejner" bylo řečeno, aby byl stanoven jako mřížka, s automatickou výškou pro řádky, zatímco sloupce mají být nastaveny na čtyři s každým nastaveným na 25 procent prohlížeče . Zkontrolujte to v prohlížeči a uvidíte, že každá položka je automaticky přiřazena další dostupnou pozici mřížky. 

 .Kontainer {
  Displej: mřížka;
  Grid-template-řady: Auto;
  Sloupce šablony mřížky: opakování (4, 25%); }

03. Definujte polohy mřížky

Nyní se podívejte na soubor 'Grid2.html'. Je to stejné jako první soubor, s výjimkou "Item11" a "Item2" jsou uvedeny konkrétní pozice. První je umístěna v řádku 1 a končí před řádkem 2. Sloupec se spustí při 1 a končí při 3, takže rozpočtuje dva sloupce. Druhý začíná ve sloupci 3 a trvá další dva sloupce. Zbývající položky vyplňují další dostupné sloty mřížky. 

 .Tem1 {
  ROW-ROW-START: 1;
  ROW-ROW-END: 2;
  Sloupec mřížky: 1;
  Sloupec s mřížkou: 3;
}
.ITEM2 {
  ROW-ROW-START: 1;
  ROW-ROW-END: 2;
  mřížkový sloupec - start: 3;
  Sloupec mřížky: 5;
}

04. Použijte šablonu mřížky

Otevřete 'Grid3.html' a podívejte se na tělo HTML. Uvidíte, že existuje uspořádání s hlavičkou, postranním panelu, hlavní část obsahu a zápatí. Můžete přidat další text do obsahu, abyste zjistili, co se stane, když je uvedeno v. Mřížka použije funkci šablony, aby se tyto kapitoly vytvořily rozložení. 

 & lt; divá třída = "kontejner" & gt;
  & lt; dig class = "záhlaví" & gt; záhlaví & lt; / div & gt;
  & lt, divové třídy = "postranní panel" & gt; postranní panel & lt; / div & gt;
  & lt; dig class = "obsah" & gt; obsah & lt; / div & gt;
  & lt; divová třída = "zápatí" & gt; zápatí & lt; / div & gt;
& lt; / div & gt;

05. Definujte šablonu

Podívejte se na CSS pro kontejner. Je opět definován jako mřížka. Horní řádek bude 200px vysoký, střední bude auto-velikosti a poslední řádek bude 100px vysoký. Sloupce jsou nastaveny na 33% široké a autofill zbytek. Stavy šablony Záhlaví naplní oba sloupce. Další řádek bude postranní panel v prvním sloupci a obsahu v dalším. Zápatí jde přes oběma. 

 .Kontainer {
  Displej: mřížka;
  Řádky mřížky: 200px Auto 100px;
  Sloupce mřížky: 33% Auto;
  Mřížkové šablony:
  "záhlaví záhlaví"
  "Obsah postranního panelu"
  "zápatí zápatí"; }

Build complex CSS layouts

Jednoduchá rozložení webové stránky je vytvořen pomocí oblastí šablony mřížky, aby definovaly, že záhlaví a zápatí rozpětí dvou sloupců, zatímco obsah postranního panelu a webové stránky zabírají jeden sloupec

06. Spojte šablonu do třídy

Chcete-li propojit třídu do šablony, kód zobrazený zde definuje. Každá oblast mřížky je pojmenována a je vytvořen odkaz. Obsah zde není zobrazen, ale je to v dokumentu 'Grid3.html'. Podívejte se na to v prohlížeči, abyste viděli rozložení mřížky. Protože jsou definovány dva sloupce, šablona potřebuje dvě oblasti v každém z obrácených čárek. 

 .HEADER {
  Mřížka: záhlaví;
}
.Stark {
  Mřížka: postranní panel;
}
.zápatí {
  Mřížka: zápatí; }

07. Aby to reagovalo

Chcete-li "Grid3.html" reagovat, je vložen mediální dotaz a horní řádek je udržován na 200%, zatímco zbývající řádky budou automaticky rozměny. Existuje pouze jeden sloupec, celá šířka, takže šablona má jedno slovo v každé invertované čárky, aby definoval rozložení. Ty lze snadno přesunout bez posunutí libovolného z HTML. 

 @Media obrazovka a (max-šířka: 699px) {
  .container {
  Displej: mřížka;
  Grid-template-Řádky: 200px Auto;
  Sloupce mřížky: 100%;
  Oblasti šablony: "záhlaví" "Sidebar" "obsah" "zápatí";
  }
}

Build complex CSS layouts

Jednoduše předefinování rozložení mřížky v mediálním dotazu všechny prvky mohou reflow s několika úpravami

08. Práce na skutečném uspořádání

Nyní otevřete 'index.html' - všechny html pro obsah byl již vytvořen, stejně jako některé z CSS pro konstrukční prvky. Přidat tuto mřížku na značky ve stylu v sekci Hlava. Proveďte tak tříkolečnou mřížku s šablonou pro každou sekci. Všimněte si úplného zastavení pro prázdné sekce mřížky. 

 .container1 {
  šířka: 80%;
  marže: 0 auto;
  Displej: mřížka;
  Grid-template-řady: Auto;
  Mřížka-šablona-sloupce: 33,3% 33,3% Auto;
  Mřížka šablony: "záhlaví záhlaví záhlaví" ". Standfirst Standfirst" ".. \ t
}

09. Spojte šablonu

Stejně jako u předchozího kroku toto odkazuje záhlaví šablonou. Záhlaví je řečeno, aby rozpětí všech tří sloupců mřížky, pak je standfirst nastaven tak, aby pořídil dva sloupce a měl vlevo prázdný sloupec. Pokud zkontrolujete prohlížeč, tento sloupec je vyplněn, protože zbývající obsah Autofilling další dostupný prostor - to neudělá, když je to vše nastaveno. 

 .HEADER {
  Mřížka: záhlaví;
}
.standfirst {
  Mřížka: Standfirst;
}

10. Přidejte další oblasti

Nyní je první článek, tahový citát a obraz zaostření jsou umístěny do designu. Pull citace a obraz jsou vedle sebe na stejné řadě. V této fázi nebyl článek 2 umístěn, takže to vezme první dostupný prostor na mřížce, která je vedle standfirstu. 

 .Article1 {
  Mřížka: článek 1;
}
.pultequote {
  Mřížka: pullquote;
}
.soustředit se {
  Mřížka: zaměření;
  Text-ALIGN: CENTER; }

Build complex CSS layouts

Když je první mřížka dokončena, design se vejde přímo na displeji desktopu, dokonce i v dobře v dobře s prvky obrázku na pozadí

11. Dokončete první mřížku

Přidání druhého článku CSS umožňuje správně umístit veškerou první mřížku. Při pohledu na to v prohlížeči zobrazí, že rozložení pracuje s obrázkem na pozadí a vytváří druh rozvržení vidět v časopisech, kde návrhář pracuje kolem velkého obrázku na pozadí. 

 .Article2 {
    Mřížka: článek2;
    Sloupcová mezera: 65px;
    Column-počet: 2;
}

12. Přidat bílé pozadí

Před zahájením druhé mřížky se můžete divit, proč je potřeba dvou mřížek. Důvodem je, že tato mřížka bude mít bílé pozadí plné šířky, takže toto CSS zabalí druhou mřížku. To je dát tuto sekci pocit druhé stránky v designu. 

 .WhiteBG {
    Polstrování: 100px 0;
    Barva pozadí: #ddd;
}

13. Udělejte druhou mřížku

Druhá mřížka je jednodušší než první. Existují tři sloupce s automatickou výškou na řádcích. Obsah bude zaplnit sloupec, takže není třeba definovat oblasti šablony. Když je však přidán návrh tabletu, musí to přepnout na dva sloupce, takže je nutné reflow a názvy budou důležité. 

 .container2 {
    šířka: 80%;
    marže: 0 auto;
    Displej: mřížka;
    Grid-template-řady: Auto;
    Mřížka-šablona-sloupce: 33,3% 33,3% Auto;
    Mřížkové šablony: "IMG1 IMG2 článek3";
}

Build complex CSS layouts

S oběma mřížkami umístěnými na obrazovce může být design posouván jako vše, co je ve správném pořadí

14. Přidejte sloupce

Každý z tříd CSS ve druhé mřížce je řečeno, aby se spojil s příslušným sloupcem, jak je definováno v šabloně mřížky. Barva textu článku se změní jen proto, aby vynikla proti světlejšímu pozadí této sekce. S pouze zápatí k dokončení, design rozložení stylu zásobníku je téměř na místě. 

 .img1 {
  Mřížka: IMG1;
}
.mg2 {
    Mřížka: IMG2;
}
.Article3 {
  Mřížka: článek3;
  Barva: # 333;
}

15. Perfektní noha stránky

Dokončení stránky umístí celou šířku Div přes obrazovku, která bude naplněna černou barvou a text je právě vycentrován. Tím se dokončí desktopovou verzi návrhu, ale přesuňte obrazovku dolů pod 1200px široký a web se spustí prolomit. 

 .footer {
    Barva pozadí: # 000;
    Barva: # 999;
    Text-ALIGN: CENTER;
    Polstrování: 50px 20px 100px;
}

16. Upravte se pro střední obrazovku

Zde je vložen mediální dotaz, aby se staral o design, když je šířka prohlížeče menší než 1200px. Kód pro kroky 17 a 18 bude umístěn uvnitř závorek, kde je komentář. To bude případ měnící se oba struktury rozložení mřížek. 

 @Media obrazovky a (max-šířka: 1200px) {
  / * kód zde * /
}

17. Reflow první mřížku

První mřížka je nastavena na nyní vyplnit celou šířku prohlížeče jen dvěma sloupcemi namísto tří. Pořadí sekcí je umístěno do šablony, s články spínací strany, protože to zapadá lépe s obrázkem na pozadí na této velikosti obrazovky. 

 .container1 {
  šířka: 100%;
  Grid-template-řady: Auto;
  Sloupce mřížky: 50% 50%;
  Mřížkové šablony: "záhlaví záhlaví" "Standfirst Standfirst" "článek1." "Pullquote pullquote" "Článek 2 zaměření";
  }
.Article2 {
  Column-počet: 1;
  }

Build complex CSS layouts

Design velikosti tabletu je na svém místě s jen sorlow obou mřížek na stránce. Nastavení těchto mřížek je jedním z nejjednodušších způsobů, jak redesign pro menší obrazovky

18. Otestujte si rozložení

Druhá mřížka je také změněna, aby se celá šířka prohlížeče a dvě sloupce přidali. Snímky jsou umístěny vedle sebe na řádek nad textem tak, aby se úhledně vejde na displej. Toto rozvržení můžete otestovat v prohlížeči změnou velikosti prohlížeče pod šířkou 1200px. 

 .container2 {
  šířka: 100%;
  marže: 0 auto;
  Grid-template-řady: Auto;
  Sloupce mřížky: 50% 50%;
  Mřížkové šablony: "IMG1 IMG2" "Článek3 článek3";
}

19. Tweak Design pro mobilní telefony

Jakýkoliv prohlížeč, který má šířku menší než 769px, dostane kód, který je přidán v závěrečných krocích. Jediné, co zde musíme udělat, je zajistit, aby každý z mřížek má jediné uspořádání sloupce tak, aby byl obsah správně zobrazen v menším prostoru. 

 @Media obrazovka a (max. Šířka: 768px) {
  / * Závěrečné kroky kód zde * /
}

20. Zkontrolujte jednoduchou sloupcovou mřížku

První mřížka je nyní nastavena na jeden sloupec 100% šířky prohlížeče a pořadí sekcí se přidá v oblastech šablony. Zkontrolujte, zda první část stránky pracuje na mobilních obrazovkách. 

 .container1 {
  šířka: 100%;
  Grid-template-řady: Auto;
  Sloupce mřížky: 100%;
  Mřížkové šablony: "záhlaví" "standfirst" "článek1" "pullquote" "zaměření" "článek2";
}

Build complex CSS layouts

Stačí říkat, že mřížky mají jeden sloupec prakticky vše, co je třeba změnit pro mobilní obrazovky

21. Dokončete rozložení

Druhá mřížka je také provedena k vyplnění jediného sloupce a rozložení sekcí je definováno. Nyní uložte hotový design a zobrazte jej přes různé velikosti obrazovek, abyste viděli plnou schopnost rozvržení mřížky CSS a jak snadné bylo pouze změnit obsah pro různé šířky. 

 .container2 {
  šířka: 100%;
  marže: 0 auto;
  Grid-template-řady: Auto;
  Sloupce mřížky: 100%;
  Mřížkové šablony: "IMG1" "IMG2" "článek3";
}

Tento článek byl původně publikován v Creative Web Design Magazine Web Designer. Koupit Vydání 271. nebo předplatit .

Související články:

  • 5 tipů pro super-rychlé css
  • Pochopení vlastnosti CSS Display
  • Jak vytvořit rozložení pyramidy s tvary CSS

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

Správa stavu reakce s Formikem

jak Sep 14, 2025

(Image Credit: Matt Crouch) Vítejte v našem průvodci, jak spravovat reakcí forma státu s FORMIK. Formové prvky ..

Přidání vícejazyčné podpory na úhlovou

jak Sep 14, 2025

V tomto tutoriálu vás budeme vezmeme prostřednictvím procesu, kdy vaše aplikace přístupná a uživatelsky přívětivá pr..

Vytvoření 3D textu v aplikaci Photoshop: Průvodce krok za krokem

jak Sep 14, 2025

V tomto tutoriálu vám ukážeme, jak vytvořit kus 3D umění představovat realistický trojrozměrný textový..

Jak vytvořit fotorealistickou místnost scénu

jak Sep 14, 2025

Chcete vědět, jak vytvořit realistické 3D architektonické fly-přes, ale není si jistý, kde zaměřit své úsilí v rámc..

Sestavte komplexní uspořádání s PSPCSS-FlexBox

jak Sep 14, 2025

FlexBox je skvělý nástroj pro snížení CSS Bloat, a má nějaký cukr zabudovaný, aby se vypořádal s věcmi, jako je zdro..

Vytvořit perspektivu tím, že deformuje vaše textury ve Photoshopu

jak Sep 14, 2025

Jsem pevný věřící, že byste neměli čistě spoléhat na software, abyste mohli dělat práci pro vás. Dobrý umělec by m..

Zrychlení pracovního postupu textury

jak Sep 14, 2025

Válečník je osobní projekt, který jsem měl radost o pojetí a navrhování. Chtěl jsem vytvořit postavu, která ztělesň..

Jak zachytit pohyb ve vašich 3D činích

jak Sep 14, 2025

Být umělcem na volné noze pracuji na různých malých projektech, z nichž většina zahrnuje vytváření a texturování ..

Kategorie