Jak efektivně zvládnout mřížku CSS v Jiffy

Jak efektivně zvládnout mřížku CSS - v Jiffy

Naučte se 20%, které potřebujete pro 80% účinnost, s CSS Grid.

Úvod

Toto není článek, který se dozví „vše“ o mřížce css.

Naopak, cílovým publikem jsou lidé, kteří chtějí výsledky rychle a být na tom produktivní.

Ve čtyřech částech tohoto článku vám ukážu 20%, které potřebujete pro 80% účinnost s rozvržením CSS Grid.

Pojďme se pustit!

Proč jen 20%?

Pokud je to možné, programátor usiluje o efektivitu - předpokládaný líný východ.

Rozvržení mřížky CSS je složité. Podle mého názoru složitější než Flexbox. (mehn, trvalo mi týdny, než jsem zjistil flexbox)
Není tomu tak proto, že je to „obtížné“, ale mřížka CSS má 18 nových vlastností plus další koncepty, o kterých jste v CSS nikdy neslyšeli.

Potřebujete tedy nyní všechny tyto nové vlastnosti? Právě teď?

Ne, ty ne!

Stačí se naučit kousek, aby vám výsledky nyní. Další vlastnosti se můžete naučit později. Toto je moje definice „účinnosti s rozvržením tabulky CSS“

1. Co je rozvržení tabulky CSS?

Pokud jste v rozvržení CSS nováčkem, může se vám zdát podivné rozvržení mřížky CSS.

Slyšeli jste o Flexboxu?

Rád vidím rozvržení mřížky CSS jako starší sourozence (nebo nadřazené) Flexboxu.

Zpracování rozvržení v CSS bylo obtížné a mizerné. Flexbox přinesl trochu čerstvého vzduchu - ale CSS Grid je ještě lepší.

Co postavíme.

Naučíte se používat své 20% znalosti při vytváření klonu responzivního rozložení hudební aplikace.

responzivní hudební aplikace, kočičí hudba

Část 1: 10%, které potřebujete znát - základní terminologie

Pojďme se podívat na první věci, které absolutně musíte vědět.

Co je to Grid Container?

Každý web nebo rozložení aplikace, které vytvoříte (nebo jste viděli), je v podstatě pole umístěná v určitých definovaných hranicích.

gif od chris bannister

Zjednodušeně řečeno, mřížka je pouze „linie“. Vodorovné a svislé čáry, které definují umístění dalších konstrukčních prvků.

S tím se seznámíte, pokud používáte designový software, jako je Adobe Photoshop nebo Skica.

V kontextu rozvržení mřížky CSS je kontejner Mřížka nadřazený, který obsahuje všechny položky v mřížce. Kontejner Grid definuje počáteční umístění čar mřížky, svislých i vodorovných.

Co je Grid Line?

Předpokládejme, že máte plně rozloženou mřížku, jako je tato:

předpokládané rozložení mřížky

Rozložení zahrnuje mřížkový kontejner s řadou dokonale uspořádaných položek mřížky (dětské prvky v mřížce)

trochu vysvětlení

Mřížkové čáry jsou vodorovné a svislé čáry, které dělí mřížku.

Co je to mřížková buňka?

Buňka mřížky je nejmenší jednotka plochy v rozvržení mřížky. Je to jakýkoli prostor ohraničený čtyřmi čarami mřížky.

„Malé rámečky“ položek mřížky mohou být označovány jako buňky mřížky.

Mřížka

Plocha mřížky může být tak malá jako oblast obsažená v buňce mřížky (ukázáno výše). Může být také velká jako všechny buňky v mřížce.

Na obrázku níže je oblast pokrytá těmito čtyřmi buňkami mřížkou.

Co je to Grid Track

Nelíbí se mi velmi technických definic. Dráhu mřížky lze tedy chápat jako fantastické jméno pro sloupce a (nebo) řádky. Je to mezera mezi libovolnými dvěma čarami mřížky.

Obrázek níže ukazuje příklad mřížkových stop.

mřížky

Máme první třídu.

Část 2: „Ostatní“ 10%, které potřebujete vědět - CSS Grid, Baby kroky.

Nyní, když chápete základní terminologie, jako dobrodružné dítě, pojďme kopat!

Jak definujete mřížku?

Stejně jako u Flexboxu, všechno začíná jednodílnou vložkou. display: grid nebo display: inline-grid pro inline verzi.

Chcete-li například vytvořit určitý oddíl z mřížky, postupujte takto:

div {
  displej: mřížka;
}

Jak vytvoříte sloupce a řádky?

Mřížka bez sloupců a řádků je zbytečná. Chcete-li vytvořit sloupce a řádky v kontejneru mřížky, použijte tyto dvě nové vlastnosti css: mřížky-šablony-sloupce a řádky mřížky-šablony.

Jak je tedy používáte? Docela jednoduché.

grid-template-column definuje umístění sloupců. řádky mřížky-šablony definují umístění řádků.

Do těchto vlastností předáte hodnoty délky a vytvoří v řádku mřížky a sloupců stopy.

Viz příklad:

sloupce mřížky-šablony: 100 px 200 pixelů 300 pixelů

Tím se vytvoří 3 nové sloupce v kontejneru mřížky. První s délkou 100px, druhý, 200px a poslední, 300px.

sloupce mřížky-šablony: 100 px 200 pixelů 300 pixelů

řádky mřížky-šablony: 100 px 200 pixelů 300 pixelů

Tím vytvoříte 3 nové řádky v kontejneru mřížky. Rozsahy jsou uvedeny níže

řádky mřížky-šablony: 100 px 200 pixelů 300 pixelů

Nyní je dejte dohromady a získáte plnou mřížku - s definovanými řádky a sloupci.

sloupce mřížky-šablony: 100 px 200 pixelů 300 pixelů
řádky mřížky-šablony: 100 px 200 pixelů 300 pixelů

Část 3: Čas do kódu - mřížka CSS, hands-on

Nyní se podívejme na budování klonu známé hudební aplikace, kočičí hudby

Pro rychlý vývoj bych používal Codepen. Roztočte nový projekt a pojďme popraskat.

Jak vytvořit základní nastavení mřížky pro hudbu Catty

Věřím, že nyní máte spuštěn základní projekt Codepen.

Vykopneme velmi základní html dokument.


   
   
   

Při výběru této struktury je trochu předvídání. Brzy pochopíš.

Nyní styl dokumentu.

tělo {
   displej: mřížka;
   min-výška: 100%
}

Tím se spustí kontext formátování mřížky tím, že se tělo stane mřížkovým kontejnerem

Nyní můžeme definovat strukturu řádků a sloupců v mřížce.

Jak vytvořit řádky a sloupce pro Catty Music

Vytváření řádků a sloupců je docela snadné.

Konečný design, pro který střílíme, je toto:

konečné rozložení hledáme.

Počáteční nastavení mřížky, kterou potřebujeme, je však mřížka 2 řádků a 2 sloupců.

počáteční nastavení mřížky

Zde je několik poznámek o tomto nastavení Gridu

Sloupce:

  1. První sloupec musí mít pevnou šířku - řekněme 50px
  2. Druhý sloupec musí vyplnit zbývající šířku v mřížce.

Řádky:

3. Druhý řádek musí mít pevnou výšku - řekněme 100px

4. První řádek musí také vyplnit zbývající výšku v mřížce.

Laické řešení.

Pokud nemáte zkušenosti s CSS, pravděpodobně to napíšete:

tělo {
   ...
   řádky mřížky-šablony: 100% 100px;
   sloupce mřížky-šablony: 50 pixelů 100%;
}

Problém je v tom, že jste omylem vytvořili mřížku, jejíž šířka a výška je celkem 100% + 50 pixelů / 100% + 100 pixelů

Chceme celkovou šířku a výšku přesně 100%, takže tento přístup není správný.

„Inteligentní“ řešení člověka.

Pokud máte s pásem CSS nějaké zkušenosti, pravděpodobně uděláte něco chytřejšího. Takhle:

tělo {
   ...
   řádky mřížky-šablony: vypočteno (100% - 100 pixelů) 100 pixelů;
   sloupce grid-template: 50px calc (100% -50px)

To je docela chytré. Má však jeden problém - není příliš udržovatelný.

Například: Pokud z nějakých důvodů musíte změnit některou z pevných šířek, musíte vždy změnit definici kalkulace.

Efektivní řešení

Naštěstí má CSS Grid novou jednotku, která elegantně řeší náš problém. Zlomková jednotka (fr)

Frakční jednotka řeší problém automatického rozdělení prostoru.

Pokud máte tři sloupce mřížky zarovnány, jak je ukázáno níže, zlomková jednotka automaticky rovnoměrně rozdělí prostor.

Pokud z nějakého důvodu přidáte další prvky - žádné starosti. Jednotka fr rovnoměrně distribuuje prostor.

A konečně, pokud máte prvek s pevnou šířkou, můžete zbývající prostor zabrat jednotkou fr.

Mám na mysli toto:

tělo {
   ...
   řádky mřížky-šablony: 1fr 100px;
   sloupce grid-template: 50px 1fr;

A to je vše - hotovo!

Pokud jste stále zaměňováni s jednotkou fr, podívejte se prosím na frakční jednotku CSS (Fr) v přístupném, jednoduchém jazyce. Trvá to jen 3 minuty.

Pojmenování a umisťování položek podle oblastí mřížky

Výslovně jsme vytvořili mřížkový systém. Nyní to dáme k použití.

Cílem této části je naučit se umisťovat položky mřížky pomocí oblastí mřížky.

Pokud si vzpomenete z předchozí sekce, je mřížkou libovolná oblast ohraničená 4 mřížkovými čarami.

„Malé rámečky“ položek mřížky mohou být označovány jako buňky mřížky.

Jak začít používat oblasti mřížky?

Logickým místem, kde začít, je pojmenování oblastí mřížky.

Dovolte mi to vysvětlit.

Zvažte níže uvedený blok kódu:

3 divy - jednoduché. Mimochodem, je sémanticky lepší používat stranou hlavní a zápatí značky. Budu jen udržovat věci jednoduché.

Podívejte se na toto:

.hlavní {
  grid-area: content;
}
.zápatí {
  plocha mřížky: zápatí;
}
.stranou {
  plocha mřížky: postranní panel;
}

Co se tam děje?

Pokud píšete trochu Javascriptu nebo jakéhokoli programovacího jazyka, nejsou pro vás pojmy proměnných nové.

V Javascriptu bychom mohli říci:

var gridArea = "content"

Co se děje výše, uložte obsah řetězce do proměnné gridArea

To, co výše uvedená prohlášení CSS dělá, je velmi podobné.

Každá položka mřížky může být přiřazena k oblasti uvnitř kontejneru mřížky. Přečtěte si to znovu.

Každá položka mřížky může být přiřazena k oblasti uvnitř kontejneru mřížky

Předtím však musíte připojit položky mřížky k názvu oblasti. Jako byste přiřadili proměnné v Javascriptu - tak nějak.

.hlavní {
  grid-area: content;
}
.zápatí {
  plocha mřížky: zápatí;
}
.stranou {
  plocha mřížky: postranní panel;
}

Výše uvedený blok kódu říká, ať má třída .main název oblasti obsahu. Nechte třídu .footer mít název oblasti zápatí. Nakonec nechte třídu stranou mít název mřížky postranního panelu

Nyní byly všem položkám mřížky přiřazeny názvy oblastí.

Při programování jsou proměnné nastaveny tak, aby byly použity jinde. Nyní využijeme názvy oblastí mřížky.

Umístění mřížky

Mladý muž má dobře upečený dort. Má 3 děti žádající, aby jim daly nějaké porce. V ideálním případě, kdo sdílí dort?

Mladý muž!

Mladý muž vyřízne oblasti a dá je svým dětem.

báječný!

Proto jsem řekl ten sladký příběh.

Stejně jako dort je celá plocha mřížky vlastněna kým?

Mřížkový kontejner!

Stejně jako mladý muž má mřížkový kontejner také 3 děti .aside .main a .footer Nyní si mřížkový kontejner vybere, jak budou sdíleny celé části oblasti.

Ještě jedna věc.

Protože všechny děti mají jména, může mladý muž říci: „Ahoj Briane, tady je tvoje část“, nebo „ahoj Emmo, máš to“

Je snadné určit, kdo vlastní jakou část dortu, a to přiřazením pojmenované osoby. Nemám pro vás žádný lék, pokud žijete v zemi, kde lidé chodí bez jmen

Všechny položky mřížky mají jména! Udělali jsme tak pomocí vlastnosti grid-area.

Nyní se pojďme podělit o dort!

Vlastnost grid-template-areas

Nyní musí mřížkový kontejner sdílet „dort“. Přiřaďte, které části oblasti patří komu.

Existuje mnoho způsobů, jak udělat to, co se chystám vysvětlit, ale vlastnost grid-template-areas je nejsnadnější důvodem. Je to kousek, který potřebujete vědět pro efektivitu.

Jak funguje vlastnost grid-template-areas?

Podívejte se na níže uvedený kód:

tělo {
      grid-template-areas: "content sidebar"
                           "zápatí zápatí";
  }

co to sakra je?

Že má drahá, je vlastnost grid-template-areas v akci. Není třeba se ohromovat. V této části vysvětlím, jak to funguje - jasně.

Vlastnost grid-template-areas (což je dlouhý název vlastnosti) poskytuje velmi vizuální strukturu mřížky.

Prohlédněte si kód znovu:

tělo {
      ...
      grid-template-areas: "content sidebar"
                           "zápatí zápatí";
  }

Upozorňujeme, že položky v hodnotě vlastnosti jsou názvy položek mřížky!

obsah postranního panelu a zápatí odkazují na názvy položek mřížky. Výše uvedené prohlášení úspěšně sdílí oblast s ohledem na názvy položek mřížky - brilantní!

Výše uvedený obrázek vám pomůže pochopit, jak byly části oblasti rozděleny.

Zápatí zabere celou dolní část. Boční panel a obsah zaujímají první a druhou horní oblast.

Skvělý!

V tuto chvíli máme následující:

tělo {
      displej: mřížka;
      sloupce mřížky-šablony: 40px 1fr;
      řádky grid-template: 1fr 90px;
      grid-template-areas: "content sidebar"
                           "zápatí zápatí";
  }

Výsledkem je toto:

KROK 1: https://codepen.io/ohansemmanuel/pen/bRWrPE

Přidal jsem barvy pro vizuální pomoc. Červená část představuje zápatí, další dvě sekce, hlavní část a boční panel.

Pojďme reagovat - znovu definujte oblasti mřížky pomocí mediálních dotazů

gif od Muharrem Senyil

Oblasti mřížky, které vytvoříte v kontejneru nadřazené mřížky, nejsou nastaveny do kamene. Oblasti mřížky lze změnit na základě velikosti obrazovky zařízení uživatele.

Obrázek níže ukazuje, čeho chceme na mobilních displejích dosáhnout.

Catty Music, na mobil

Pro náš konkrétní případ použití uděláme nějaké refaktoring pro první mobilní přístup.

Mobilní nejprve jednoduše nastavuje vaše výchozí styly pro mobilní zařízení. Pak můžete pokračovat v úpravách pro větší displeje prostřednictvím mediálních dotazů.

Vylepšete aktuální kód, který máte nyní. Zabalte bit definující mřížku do mediálního dotazu.

Takhle:

@media pouze obrazovka a (min-width: 600px) {
    tělo {
        sloupce grid-template: 120px 1fr;
        grid-template-areas: "content sidebar"
                             "zápatí zápatí";
         }
}

Měli byste ponechat výchozí hodnoty vyloučené z dotazu na média

tělo {
    displej: mřížka;
    řádky mřížky-šablony: 1fr 50px;
}

Proč mám z dotazu na média vyloučeny řádky mřížky-šablony: 1fr 50px?

Důvodem je, že mobilní i stolní obrazovky budou mít stejnou definici řádku. 2 řádky.

Na stolních zařízeních je však postranní panel. Boční panel odpovídá definici 120 pixelů v definici sloupců mřížky. Na mobilních zařízeních však postranní panel neexistuje.

Proto předefinujeme deklaraci sloupce grid-template-column pro mobily.

Nyní pro mobilní zařízení ponecháme toto jako výchozí styl. tj. není zabalen do žádného mediálního dotazu.

tělo {
   grid-template-areas: "content"
                        "zápatí"

Docela jednoduché?

Nech mě to vysvětlit.

Výchozí tok (směr) mřížky

Blok kódu pro mobilní displeje je snadný.

tělo {
   grid-template-areas: "content"
                        "zápatí"

Všimněte si však, že nebylo nutné specifikovat sloupce mřížky-šablony

Ve výchozím nastavení bude mřížka zarovnána její děti podél řad.

Výše uvedené prohlášení tedy zarovná obsah podle řádku a zápatí podél jiného.

Níže je výsledek - boční panel skrytý na mobilu.

KROK 2: https://codepen.io/ohansemmanuel/pen/qjVvjJ?editors=1100

S počáteční překážkou porozumění fungování sítí a nastavením responzivní mřížky dokončíme rozložení aplikace!

Umístění obsahu do mřížky.

Na konci této části by mělo být rozložení aplikace Hudba dokončeno. Důraz je kladen na to, jak umístit a zarovnat obsah v mřížkách.

Začněme.

1. Boční panel

Vypadá to, že nejjednodušší je začít. Pojďme na to.

Boční panel se skládá z 8 ikon rovnoměrně rozmístěných vertikálně po celé délce bočního panelu.

Vložte ikony takto:

                                                       

Níže je výsledek:

https://codepen.io/ohansemmanuel/pen/BZmbza

Ikony také skryjte na mobilu. Zobrazit je při návštěvě aplikace na větší obrazovce. Toto je první mobilní přístup.

.aside i {
  displej: žádný;
}
@media pouze obrazovka a (min-width: 600px) {
  .aside i {
    displej: blok;
  }
}

Ikony jsou zobrazeny, ale špatně zarovnány.

Zarovnání ikon

Značky i jsou vložené prvky - což vysvětluje, proč každé 2 ikony sedí na jednom řádku.

Pojďme opravit uspořádání.

Položky mřížky mohou být samotné mřížky. Proč ne

Krok 1: Vytvořte z postranního panelu kontejner s mřížkou

Tím získáte přístup k používání funkcí zarovnání mřížky.

Protože je postranní panel vidět pouze na větších obrazovkách, nezapomeňte to zabalit do dotazu na média.

@media pouze obrazovka a (min-width: 600px) {

  .stranou {
     displej: mřížka;
  }
  
  .aside i {
    rámeček: 1px plná červená;
  }
}

Do každé ikony jsem přidal hranice - takže jsou vizuálně rozlišitelné.

Co se tam děje?

NIKDY jsme nenastavili žádné řádky ani sloupce na postranním panelu. Ale máme ikony rozložené docela dobře. Byl nastaven algoritmus automatického umisťování mřížky.

To souvisí s výchozím umístěním položek v mřížce - podél řady. Rovněž položky mřížky jsou uspořádány tak, aby podle potřeby zabíraly prostor mřížkového kontejneru.

Přichází sladká omáčka.

Mřížka může zarovnat své položky pomocí kterékoli z položek zarovnání nebo zarovnání.

justify-items zarovná položky podél osy řádku. Ve většině případů je řada do značné míry synonymem horizontálního směru.

Zarovnat položky zarovná položky podél osy sloupce. Ve většině případů je sloupec také synonymem pro svislý směr.

Použijte to na postranním panelu a my máme dokonale rozložené ikony.

.stranou {
     ...
     justify-items: center;
     Zarovnat položky: střed;
  }

Při psaní stále sledujte změny položek v postranním panelu.

Nyní máme v postranním panelu dokonale rozložené ikony.

https://codepen.io/ohansemmanuel/pen/MorYJq?editors=1100

Několik dalších hodnot, které mohou zarovnat položky a zarovnání, může zahrnovat:

  • protáhnout se
  • Start
  • konec
  • centrum

Pokud jste pracovali s Flexboxem, měli byste to znát.

Pokračujeme v umisťování dalšího obsahu do aktuálního designu.

Zaměřte na hlavní část, tmavě modrou část na obrázku výše. Umístěte dvě div uvnitř:

  
  

Pozn .:

  1. main__header pojme hudební umění a přehrávání:
.main__header

2. main__body uloží podrobnosti:

.hlavní tělo

V této sekci se zaměříme na main__header

Nejprve přidejte požadovaný html

      
                 
      
          
              

Nejlepších 100 jednoduchých grafů CattyBoard (11.06.36)

              

Neznámý umělec

              

2016. Grafy. 100 písní

          
          
                & nbsp; Přehrát vše                 & nbsp; Přidat do                 & nbsp; & nbsp; více           
      

Poznamenejte si strukturu dokumentu.

main__header má dvě přímé děti. Div, který obsahuje obrázek, a část, která obsahuje podrobnosti o albu, .details

Výsledkem výše uvedeného přidání je tento poněkud ošklivý obrázek:

neúplná hlavička

Udělejme to hezké.

Potřebujeme mřížku, která správně přizpůsobí své děti.

Využijte vaše nové znalosti oblastí mřížky.

První krok, definujte oblasti mřížky:

.main__header> .img {
  plocha mřížky: img;
}
.main__header> .details {
  grid-area: dtls;
}

Div obsahující obrázek byl pojmenován img Část obsahující podrobnosti o albu byla pojmenována dtls

Nyní definujte samotnou mřížku:

.main__header {
  displej: mřížka;
  grid-template-areas: "img"
                       "dtls";
}

.main__header nastaví kontext formátování mřížky. Oblasti byly také zarovnány, aby se stohovaly vertikálně na jiné. imgfirst, pak dtls

Je to proto, že pracujeme s mobilním prvním přístupem. Dobrý.

V tuto chvíli se nic moc nezměnilo.

Zahrnul jsem okraje a text jsem pro vizuální pomoc udělal bělavý.

Toto není pohled, jaký chceme na mobilu.

U mobilních obrazovek by položky měly být zarovnány ke středu. Opravte to.

@media screen a (max-width: 600px) {
  .main__header {
    justify-items: center;
  }
}

Položky mřížky budou nyní umístěny do středu mřížky (podél řádku)

Zarovnejte texty v .details na střed:

@media screen a (max-width: 600px) {
  .main__header> .details {
    zarovnání textu: střed;
  }
}

Docela blízko ke konečnému cíli. Ještě pár vylepšení.

Odstavce s texty, neznámý umělec a 2016. Grafy. 100 písní. by měl být skryt v mobilu. Obrázek by měl být také menší.

@media screen a (max-width: 600px) {
  .sm - skrýt {
    displej: žádný;
  }
  .img> img {
    šířka: 150px
  }
}

Každá třída .sm - skrýt se skryje na mobilu. Stačí přidat tuto třídu k požadovanému prvku.

Zde je návod:

Neznámý umělec

2016. Grafy. 100 písní

A máme toto:

Po vyřešení pohledu na mobilu to vyřešíme pro větší obrazovky.

Zpět na nadřazenou mřížku.

Pro větší obrazovky potřebujeme mřížku se 2 sloupci. Oblasti by měly být rozděleny takto:

@media pouze obrazovka a (min-width: 600px) {
   .main__header {
    sloupce grid-template: 250px 1fr;
    grid-template-areas: "img dtls"
  }
}

Určitě chápete, co se tam děje.

Mřížka byla předefinována tak, aby měla dva sloupce. Jeden byl stanoven na 250 pixelů a druhý vyplnil zbývající prostor.

https://codepen.io/ohansemmanuel/pen/gReOQJ?editors=1100

Náš současný pokrok zde žije.

Část 4: Zajištění práce CSS Gridu s Flexboxem

V této části se naučíte, jak Flexbox a Grid spolupracují - pokojně.

Tyto dvě technologie změnily způsob úpravy rozvržení v CSS. Pokud je to možné, je efektivní využití obou technologií.

Pojďme se ponořit.

Pro sekci obsahující hudební detaily použijeme flexbox.

Jak víte, kde používat Flexbox?

Jako obecné pravidlo je vhodné použít k rozložení celkového rozvržení stránky mřížku a Flexbox pro vnitřní komponenty uživatelského rozhraní.

Položkou mřížky může být flex kontejner. Flexibilní položkou může být také mřížkový kontejner. Ten se však často používá.

Předpokládám, že máte dobrý přehled o flexboxu.

Jako vždy začněte s html

Níže je div se seznamem písní. Seznam skladeb obsahuje odstavce, které obsahují název skladby, interpreta, dobu trvání skladby a „synchronizaci mračen cloudu“.

        
              

1. Jeden tanec

              

Crake feat CatKid & amp; Cyla

              

2:54

              

CATTY CLOUD SYNC

        
        
              

2. Panda

              

Cattee

              

4:06

              

CATTY CLOUD SYNC

        
        
              

3. Nelze zastavit pocit!

              

Catin Cimberlake

              

3:56

              

CATTY CLOUD SYNC

         
         
              

4. Práce z domova

              

Cat Harmony feat Colla

              

3:34

              

CATTY CLOUD SYNC

         
    

Zde je to, co máme:

main__body je položka mřížky. Pokud by to bylo užitečné, mohli bychom z něj vytvořit flex kontejner.

Pro náš případ použití musí být každé přímé dítě main__body flex kontejner. Jedná se o divthat, který obsahuje název skladby, interpreta, dobu trvání skladby a „catty cloud sync“.

.main__body> div {
  displej: flex;
}

Nyní rozdělte šířku mezi podřízené prvky:

.main__body> div p {
  flex: 0 0 25%;
}
https://codepen.io/ohansemmanuel/full/pwLEBL/

Souhlasíte se mnou, že v tomto okamžiku jsou provedeny náležitosti rozložení. Ano,

Přesto jsem však udělal několik kosmetických změn.

Zde si můžete prohlédnout výsledek

Všimnete si, že jsem zápatí nechal prázdné. To by pro vás mělo být cvičení. Moje rada je použít flexbox. To posílí vaše porozumění tomu, jak obě technologie spolupracovat. Pokračujte a vytvořte položku mřížky, zápatí flex kontejneru.

Pokud potřebujete nějaké narážky, podívejte se na kočičí hudbu vytvořenou zcela pomocí flexboxu.

Díky několika vlastnostem mřížky jste vytvořili rozložení ve skutečném světě. To je docela působivé. Také jste se naučili neocenitelnou dovednost, jak rozvržení tabulky CSS Grid pracovat také s Flexboxem.

Chcete se stát profesionálem?

Stáhněte si můj volný CSS Grid cheat sheet, a také získejte dvě kvalitní interaktivní kurzy Flexbox zdarma!

Získejte zdarma list CSS Grid Cheat + dva kvalitní kurzy Flexboxu zdarma!

Získejte je hned