Hur man skapar en responsiv CSS Grid-layout. Tilldela områden till mallar och experiment

• Youtube

Div # navbar ul (liststil: ingen; display: block; marginal: 0 10px;) div # navbar ul li (flytande: vänster; marginal: 0 1,5em; teckensnitt: fetstil 1em Arial;)

Häftigt! Allt går bra med oss. Allt som återstår är ett block med en affisch och en presentation av sajten, men innan vi börjar implementera dem vill jag säga några ord om CSS-ramverk i allmänhet.

3. CSS-ramverk kommer inte att lösa alla dina problem

Innan du börjar göra designlayout på ett CSS-ramverk bör du överväga några av nackdelarna med dessa system. När du läste den här artikeln kunde du inte låta bli att lägga märke till att reglerna för att bygga en sida är mycket strikta. Allt har sin egen fasta storlek. När du ändrar bredden på ett block måste du ändra andra. Något måste man i alla fall offra. Till exempel, vad skulle du göra om du har en 1000px design och 960 Grid låter dig skapa en maximal bredd på 960px ... Du vill ha 1000px! Utan en massiv förändring i koden är detta omöjligt att implementera. Till exempel vill en kund ha en bredare sida eller så håller en designer inte med om din implementering. Det finns ett annat problem med högtalarhöjderna. Om tre kolumner har samma bakgrundsfärg (som vi har i sidfoten), måste dessa kolumner ha samma höjd. En annan betydande nackdel: användningen av ytterligare indrag och skapandet av ramar leder till att hela layouten förstörs. För att lägga till det som behövs och inte förstöra någonting måste du kompensera för de tillagda dimensionerna. Nu ska jag visa dig hur. Låt oss börja avsluta den övre delen.

4. Översta delen

Låt oss först lösa problemet med kolumnhöjden - låt oss fixa det. Låt oss sedan skapa tomma divs i det ena och det andra blocket. De kommer att innehålla en ritning eller textinformation... Vi kommer inte att fastställa interna marginaler sedan dess du kan bryta andelen av rutnätets bredd. Låt oss lägga till lite utfyllnad till p-taggarna för att få texten att se snygg ut.

I det här fallet är det bättre att skapa en klass för stilen, inte ett ID, eftersom vi måste tillämpa det på flera block. Vid behov kommer detta också att tillåta oss att ändra höjden i 2 steg. Så här ser våra klasser ut:

Div.topSection div (kant: fast 10px # e5e5e6; höjd: 280px;) div.topSection div p (marginal: 10px;)

Häftigt! Låt oss se vad vi har:

Redo att fylla? Släpp sedan lite text i det vänstra blocket, men överdriv inte för att inte överskrida höjden. Faktum är att i verkliga projekt måste designern beräkna allt detta (antalet tecken som blockstorleken kommer att uppfylla); Innan du infogar bilden i det högra blocket måste du bestämma storleken, om du inte redan har gjort det. Detta kan göras tidigt i designprocessen eller genom FireBug. Klicka på Inspektera. Klicka på den div vi behöver. Välj fliken Layout. Efter det kommer du att se all information du behöver. Följande bild hjälper dig:

På skärmdumpen har affischen måtten 360x280. Hitta en bild och stil den:

Bild # affisch (bredd: 360px; höjd: 280px;)

Det är allt! Mallen är klar. Nu återstår bara att fylla den med riktigt innehåll och lägga den online:

5. Känn till dina alternativ

Nu när allt är klart, låt oss sammanfatta. 960 Grid tillät oss att nita en mall på 15 minuter. Häftigt? ja! Har vi testat det i IE6, IE7? Inte! Måste? Nej. Detta är bara början! Vad ska vi göra? Nu måste du visa det för kunden och titta på reaktionen. Om det passar honom, då kan du börja testa, men om inte, och kunden vill ha något mer komplicerat, då måste du skriva allt från grunden själv. Jag kommer att upprepa det igen. CSS-ramverk löser inte alla problem. Trots detta använder tusentals utvecklare dem som ett vanligt webbutvecklingsverktyg eftersom CSS-ramverk, precis som alla verktyg, har ett eget område för utbredd användning. I vilket fall som helst, om designförfrågningar inte är superspecifika (80 % av tiden), kan du spara mycket tid med att använda 960 Grid - och tid är pengar!

Den här artikeln visar hur detta i jämförelse ny teknologi, det fungerar, inte bara beskrivning av egenskaper med ytexempel.

Själva artikeln är en responsiv utökad översättning av CSS Grid Tutorial

CSS Grid Module utvecklades av CSS Working Group för att ge det bästa sättet att skapa mallar i CSS. Det fanns med i en kandidatrekommendation i februari 2017, och stora webbläsare började stödja det i mars 2017.

CSS Grid kommer snart att bli en viktig del av alla front-end-utvecklares verktygslåda. Och om du är en av dem, då måste du lära dig CSS Grid - vilket nästan säkert kommer att bli en obestridlig färdighet för alla positioner inom front-end-utveckling.

Med denna kraftfulla funktionalitet och intuitiva syntax kommer rutnätsmallar utan tvekan att förändra hur webben är byggd.

Introduktion

CSS Grid är ny modell mall optimerad för 2D-mallar. Det är den perfekta modellen för webbplatsmallar, formulär, gallerier och allt annat som kräver exakt och lyhörd positionering.

Med utvecklingen av webben i senaste åren, har utvecklingen av webbplatsmallar blivit svårare och svårare. Under webbens tidiga dagar användes HTML-tabeller ofta för mallar med flera kolumner, formulär och mer. Men denna metod har sina nackdelar. Detta innebär att presentationen måste göras på uppmärkningsnivå, så det gjordes ingen skillnad mellan presentation och innehåll. Faktum är att tabeller skapades för att innehålla tabelldata, inte för att skapa mallar. Bortsett från semantiska problem är tabellmallar inte gjorda för responsiv design.

Floats ersatte så småningom tabellmallar som den allmänt accepterade och rekommenderade metoden för att skapa mallar, eftersom de tillåter oss att placera element oavsett markering. Men även om denna metod ansågs vara en betydande förbättring jämfört med tabelllayouten, hade den också sina begränsningar. Floats var främst designade för dokumentmallar och lämpade sig inte för de komplexa applikationsmallar som nu är vanliga på webben. Flytelement är svåra att kontrollera, särskilt på enheter och visningsportar olika storlekar... Detta ledde till olika rutnätsliknande hack som blev normen, varav de flesta krävde ytterligare uppmärkning som distraherade från hela konceptet med innehållsdelning. Så CSS-arbetsgruppen letade efter en bättre lösning.

CSS Grid Model tar upp dessa problem och mer. Det låter dig skapa avancerade mallar på en bråkdel av den tid du skulle spendera med flottor och med mindre kodning.

Men självklart för detta kan man använda olika betydelser som 100px, 7em, 30% och så vidare. Du kan också tilldela namn till strängar tillsammans med deras storlekar.

rutnät-mall-kolumner: 1fr 1fr 1fr

Samma som ovan, definierar bara kolumner i rutnät.

Avslöjar en paus. Det vill säga mellanrum mellan rutnätsobjekt. Här använder vi längdenheten vw, som är relativt visningsportens bredd, men vi kan också använda 10px, 1em, etc. Grid-gap-egenskapen är en förkortning för grid-row-gap och grid-column-gap egenskaper.

Tja, den andra delen av koden tilldelar bara olika stilar till rutelementen.

#grid>

Upprepa () funktion

Du kan använda funktionen repeat () för att upprepa elementstorleksvärdedeklarationer. Till exempel, istället för att göra så här:

Rutnät-mall-rader: 1fr 1fr 1fr 1fr 1fr;

Vi kan göra det här:

Rutnät-mall-rader: upprepa (5, 1fr);

Detta kommer avsevärt att minska mängden kod du måste skriva, speciellt om du arbetar med stora och repetitiva rutnät.

Hur man skapar en webbplatsmall med CSS Grid

Grids inkluderar en intuitiv "ASCII grafisk" syntax där du praktiskt taget kan "se" mallen i koden, vilket gör det mycket enkelt att skapa och ändra din mall. Även stora förändringar kan göras på några sekunder. Denna intuitiva syntax hjälper också till med responsiv webbdesign. Att skapa olika mallar för olika enheter blir ganska trivialt när man använder rutnät.

Låt oss nu skapa en webbplatsmall som ser ut så här:

Och här är koden för denna mall:

Låt oss ta en närmare titt på vår kod. HTML-uppmärkning ser ut så här:

Och så kommer vi att göra en rutnätsbehållare, så alla andra objekt blir rutnätsartiklar.

Låt oss nu ta en titt på ASCII-grafiken som vi pratade om tidigare.

Grid-template-areas: "header header header" "navigeringsartikelannonser" "sidfot sidfot sidfot";

Den här biten definierar vår mall. Bara genom att titta på koden kan vi se att detta är ett 3x3 rutnät (tre rader och tre kolumner). Detta ger oss fem rutnätsområden på nio rutnätsceller, eftersom vissa rutnätsområden spänner över flera celler.

Vi ser också att rubriken upptar hela den första raden med tre celler, och källaren upptar hela den nedre raden, och tar också tre celler. Navigerings-, innehålls- och reklamsektionerna delar tillsammans utrymme på den andra raden, där vart och ett av dessa element får en cell.

Vi kan nu tilldela vart och ett av dessa rutnätsområden till varje objekt:

#pageHeader (grid-area: header;) #pageFooter (grid-area: footer;) #mainArticle (grid-area: article;) #mainNav (grid-area: nav;) #siteAds (grid-area: ads;)

Grid-area-egenskapen är en förkortning för en egenskap som låter dig placera rutnätsobjekt på ett rutnät. I vårt fall syftar vi helt enkelt på namnen som vi tidigare angett i grid-mall-områden.

Det mesta av mallen har redan färdigställts. Resten av koden kommer helt enkelt att hänvisa till dimensioner, avstånd och höjder, mer generellt det dekorativa området.

Följande kod ger dimensioner för rader och kolumner:

Rutnätsmall-rader: 60px 1fr 60px; rutnät-mall-kolumner: 20% 1fr 15%;

Den första och tredje raden är båda 60px höga, och den andra raden tar upp eventuell återstående plats.

Den första kolumnen är 20 % och den tredje är 15 %. Den andra tar all återstående plats.

Ändra mall

Du kan ändra mallen helt enkelt genom att ordna om rutnätsområdena i rutnätsmallområden.

Så om vi ändrar till detta:

Grid-template-areas: "nav header header" "nav article ads" "nav footer ads";

Sedan, som ett resultat, får vi följande mall:

Du kan dock behöva justera storleken om du flyttar ett mindre rutnät till ett större.

Till exempel, för att göra detta:

Navigeringen tar nu den plats där innehållet var, därför har dimensionerna justerats. Annars skulle vi ha ett smalt innehåll och bred navigering. Så nu ser koden ut så här.

Grid-template-areas: "header header header" "article nav ads" / * Innan det fanns "nav article ads" * / "footer footer footer"; rutnät-mall-rader: 60px 1fr 60px; rutnät-mall-kolumner: 1fr 20% 15%; / * Innan dess var det '20% 1fr 15%'* /

Bygga ett responsivt rutnät

Rutnätsmallen har värden som autofyll och autopassning, vilket gör att du kan skapa ett rutnät med många spår av en specifik storlek som passar in i behållaren. Detta kan innebära att rutnätet är responsivt, vilket innebär att elementen ändrar sina positioner när du ändrar storlek på webbläsarfönstret.

Ett exempel på hur du använder Autofyll:

Här är resultatet:

Koden som ansvarar för detta:

Rutnät-mall-kolumner: upprepa (autofyll, minmax (150px, 1fr));

Det ger kolumnerna en minimistorlek på 150px och ett maximum för det återstående utrymmet. Sådana spår kommer att upprepas så många gånger som behövs för att passa in i behållaren.

Funktionen Repeat () upprepar definitionen av ett spår det antal gånger som anges av den första parametern. Om du använder autofyll kommer spåren att upprepas lika många gånger tills de fyller behållaren.

Storleken på dessa spår anges i den andra parametern. I vårt fall använder vi minmax (150px, 1fr) för att indikera att den minsta kolumnstorleken är 150px och den maximala är 1fr.

Autopassning

auto-fit fungerar ungefär på samma sätt som auto-fill. Den enda skillnaden är att auto-fit kollapsar alla tomma spår i slutet av placeringen, medan auto-fill inte gör det. Det bästa sättet här är en demo med en jämförelse.

Att använda två små rutnätselement här kommer att hjälpa till att visa hela konceptet med arbete. Autofyll lämnar tomma spår i slutet med de angivna måtten, och autopassning sträcker ut det tomma spåret, vilket leder till att spåren fylls med sträckta element för att fylla utrymmet.

Rutnät med mediafrågor

En av styrkorna med rutnät är att du kan skapa en helt annan mall på några sekunder.

Detta gör rutnät idealiska för mediefrågor. Vi kan helt enkelt tilldela om värdena i ASCII-grafik och slå in resultatet i en mediefråga.

Detta är en layout med tre kolumner på en stor visningsport och krymper till en layout med en kolumn på små enheter. Således kommer detta exempel att se annorlunda ut beroende på skärmstorleken. Hur som helst, här är den relevanta koden för 3-kolumnmönstret, för breda vyportar.

Grid-template-areas: "header header header" "navigeringsartikelannonser" "sidfot sidfot sidfot";

Och här är motsvarande kod för mobilversionen:

Grid-template-areas: "sidhuvud" "artikel" "annonser" "navigering" "sidfot";

Så det handlar om att omfördela värdena i egenskapen grid-template-areas.

I vårt fall slog vi in ​​mobilversionen i en mediefråga, som här:

@media all and (max-width: 575px) (brödtext (grid-template-areas: "header" "article" "ads" "nav" "footer"; grid-mall-rader: 80px 1fr 70px 1fr 70px; grid- mall-kolumner: 1fr;))

Observera att vi även justerade värdena i rutnät-mall-rader och rutnät-mall-kolumner för att passa den nya mallen. I synnerhet ska det bara finnas en kolumn och den ska ta upp allt ledigt utrymme. Och eftersom alla rutnätsobjekt kommer att vara i en hög kommer vi att tilldela 5 rader och bestämma deras höjder.

Kombinera rutnät med block

Beroende på kraven i din mall finns det inget som hindrar dig från att ändra mobilversionen till att visa: block. Som här:

@media alla och (maxbredd: 575px) (kropp (display: block;))

Detta kommer att fungera på samma sätt som i exemplet ovan, men som standard kommer elementen att visas i sin ursprungliga ordning. I exemplet ovan har mobilversionen ett nav under annonser, men om vi skulle använda display: block skulle nav vara högre än annonser.

Med den här metoden kan du också behöva lägga till lite extra stoppning för att kompensera för de saknade luckorna som ingick i rutnätsversionen.

Explicita och implicita rutnät

CSS Grid använder konceptet av ett explicit rutnät och ett implicit. Detta är ett nyckelbegrepp som du måste hålla utkik efter när du skapar rutnät, annars kommer du att få en massa rader och kolumner som du aldrig förväntade dig att existera.

Ett explicit rutnät är rutnätet som du definierar i rutnät-mall-rader, rutnät-mall-kolumner och rutnät-mall-områden.

Däremot kan du fortfarande ha objekt som inte passar in i ditt "explicit" definierade rutnät. Till exempel definierade du ett rutnät som bara kan passa sex föremål, men själva behållaren är faktiskt nio föremål. Endast sex objekt kommer att passa in i det explicita rutnätet, och tre kommer att finnas kvar. Och det är här som implicita rutnät börjar.

Implicita rutnät genereras automatiskt av rutnätsbehållaren när rutnätsobjekt är placerade utanför det explicita rutnätet. Behållaren genererar implicita rutnätsspår genom att lägga till implicita linjer till rutnätet. Dessa linjer, tillsammans med de explicita rutnäten, bildar de implicita. Här är ett exempel:

I det här exemplet definierar vi uttryckligen två rader och två kolumner för att passa fyra rutnätsobjekt. Det finns dock sex rutnätsobjekt, så ett implicit rutnät skapades för att rymma ytterligare två objekt.

Och det är väldigt bra, om det implicita rutnätet inte hade skapats, skulle de två extra elementen ha skapat en komplett röra av rutnätet.

Ställa in spårstorlek för implicita rutnät

Du kanske har märkt att den extra raden inte är lika hög som de två föregående. Detta beror på att vi har ställt in radhöjden i egenskapen grid-template-rows, men det gäller bara explicita rutnät. Radhöjden på implicita rutnät måste ställas in med egenskapen grid-auto-rows. Men eftersom vi inte gjorde det, visar det sig att den implicita raden använder den automatiska spårstorleken, som baseras på innehållet. Så här ligger spårdimensioneringsegenskaperna:

Generellt sett ser det ut så här:

Explicit rutnät använder rutnät-mall-rader och rutnät-mall-kolumner

Implicit rutnät använder rutnät-auto-rader och rutnät-auto-kolumner

I det här fallet behöver vi inte ange slutvärdena på det första elementet, eftersom det bara täcker ett spår. Detsamma kan sägas om det andra rutnätet. Som standard, om du inte anger slutraden, kommer elementet bara att täcka ett spår.

Faktum är att vi inte behövde ange någon positionering för det första rutelementet, eftersom det är i en viss position, då skulle det vara det ändå. Men om vi inte angav positionering för det andra elementet, skulle det placeras omedelbart efter det första elementet, och upptar bara 1 spår.

Namnge rutnätslinjer

Du kan också namnge rutnätslinjer för enklare referens. Detta kan göras genom att ställa in egenskaperna för grid-template-rows och grid-template-columns, till exempel så här:

#grid (display: grid; / * Ställ in spåren och namnge linjerna * / grid-template-rows: 50px 1fr 80px; grid-template-columns: 120px 1fr 80px; grid-gap: 5px; height: 90vh;) . .. / * Se nu till de namngivna raderna * / # item2 (rutnät-rad-start: rad3-start; rutnät-kolumn-start: kol2-start; rutnät-rad-slut: rad3-slut; rutnät-kolumn-slut : col3 -end;)

Namngivna rader kan vara explicita eller implicita. Implicita namngivna linjer skapas när du skapar namngivna rutnätsområden med hjälp av rutnätsmallområden.

Namnet är hämtat från rutnätsområdet med tillägg av -start och -end, beroende på om det är början eller slutet av raden.

Detta kommer att skapa fyra implicita linjer för varje namngiven rutnätshuvudområde. Två är namngivna header-start och kolumn-start i det namngivna rutnätsområdet och två namnges header-end respektive.

Namngivna rutnätsområden

Rutnätsområden kan namnges i egenskapen grid-template-areas för själva grid-behållaren. Detta är vad vi gjorde tidigare när vi skapade webbplatsmallen. För att återställa det till minnet ser det ut så här:

#grid (display: grid; / * Byt namn på rutnätsområdet * / grid-template-areas: “aa” “bc”;…)... / * Applicera nu varje gridobjekt på det namngivna rutnätsområdet * / #a (grid- area: a;) #b (rutnätsarea: b;) #c (rutnätsarea: c;)

Du kan ange en tom cell med en punkt (.) eller en serie punkter utan mellanslag. Till exempel:

Grid-template-areas: "a a" ". b "; Eller grid-template-areas: "header header" "... content";

Rutnätsplaceringsegenskaper

Det finns tre korta egenskaper som du kan använda i stället för de långa egenskaperna för att placera rutnäten som nämns i exemplen ovan. Det är där de alla passar.

rutnätsområde - Den här egenskapen är en förkortning för:

grid-column - Den här egenskapen är en förkortning för:

rutnät-kolumn-start - anger vilken kolumnrad i rutnätsobjektet som är startraden och hur många spår den sträcker sig.

grid-column-end - indikerar på vilka kolumnlinjer rutnätsobjektet slutar och hur många spår det sträcker sig.

grid-row - Den här egenskapen är en förkortning för:

grid-row-start - indikerar vilken radlinje rutelementet börjar med och hur många spår det sträcker sig.

grid-row-end - indikerar vilken radlinje som kommer att vara den sista för elementet och hur många spår det kommer att sträcka sig.

Du kan också använda egenskapen grid-auto-flow som nämndes i kapitlet före detta. Den anger hur de automatiskt utlagda rutnätsobjekten ska passa i rutnätet. Autoplacerade objekt är de som inte uttryckligen placeras med någon av egenskaperna ovan.

Skapa ett kapslat rutnät

Grid-element kan själva bli rutnät i CSS Grid. Det vill säga, du kan kapsla ett rutnätsobjekt i ett annat rutnätsobjekt och därigenom skapa ett kapslat rutnät.

För att skapa ett sådant kapslat rutnät behöver du bara tillämpa display: grid (eller display: inline-grid) på gridobjektet och det kommer att bli ett grid själv. Du kan också använda display: subgrid för att skapa ett subgrid. , Hur går det till.

Arv

De flesta rutnätsegenskaper ärvs inte, vilket innebär att ditt kapslade rutnät inte kommer att ärva värdena från dess överordnade rutnät. Detta gör att du kan göra ändringar i det överordnade rutnätet utan att oavsiktligt påverka det kapslade rutnätet.

Du exponerade till exempel grid-auto-flow:-kolumnen i det överordnade rutnätet, men du exponerade inte egenskapen i det kapslade rutnätet. I det här fallet kommer det kapslade rutnätet att ställas in på rad, eftersom det är det ursprungliga värdet för den här egenskapen.

Observera att på det överordnade rutnätet går siffror vertikalt ner i kolumnerna istället för horisontellt längs raden, men det kapslade rutnätet går fortfarande horisontellt längs raden.

Subgrids

CSS Grid-modulen ställer in subgridvärdet för visningsegenskapen. Men inte alla webbläsare stöder det ännu. Detta värde borde vara ganska användbart.

Subgrid är ett kapslat rutnät, men med display: subgrid. Detta gör den till en speciell typ av rutnätsbehållare som är med och dimensionerar den överordnade nätbehållarens rutnät. Med andra ord, innehållet i undernätet påverkar storleken på det överordnade rutnätet, vilket gör att innehållet kan ordnas över två rutnät. Nedan är ett exempel på var den här egenskapen kan vara användbar.

Här är en lista med föremål:

• Namn:
• Adress:
• Telefon:

Här är CSS, där listan är ett rutnät och listobjekten är undernät.

Ul (display: grid; grid: auto-flow / auto 1fr;) li (display: subgrid; grid-column: span 2; marginal: 0.5em; border: solid; stopping: 0.5em;) label (grid-column: 1;) input (rutnät-kolumn: 2;)

Det här exemplet skulle visa etikett och indata i en rad, med en ram runt varje listobjekt. Att exponera varje element i listan för ett undernät betyder att det inte bör vara några problem med justeringen av inmatningsformulär, eftersom varje element i listan kommer att delta i bildandet av storleken på det överordnade rutnätet.

Formulär med automatisk placering

Du kan använda explicita rutnät som en fördel när du skapar former eller någon annan klump av objekt som behöver rutnätsjustering. Du kan till exempel använda explicita rutnät för att skapa en form så här:

Och när du lägger till formulärelement i markeringen kommer det explicita rutnätet att lägga till linjer för att passa dem. För att skapa formen på toppen behöver vi alltså denna markering.

Inget behov av ytterligare uppmärkning för att ordna allt korrekt. Och det finns inget behov av att lägga till ytterligare klasser för formulärelement. Vi lägger bara till en klass för

Du kan automatiskt lägga till nya formulärelement och de anpassas automatiskt till de andra eftersom de kommer att placeras i det explicita rutnätet.

Detta är möjligt eftersom vi gjorde själva formuläret till ett rutnät (eftersom myForm appliceras med display: grid). Och sedan specificerade vi att etiketter går till en kolumn och kontroller går till en annan.

Här är ett annat exempel, den här gången med ännu fler element:

När undernät blir utbredda i webbläsare kommer det att vara möjligt att justera formulärelement som inte är direkta ättlingar.