Vad är ett flexibelt rutnät i en responsiv layout? Löser problemet med Grid. CSS Grid justering
Jag lade märke till Grid-tekniken för ungefär ett år sedan. Sedan verkade den här tekniken, efter en mycket ytlig studie, för mig värdelös och mycket experimentell, stött bort av det faktum att det var nödvändigt att skapa onödig uppmärkning för implementeringar. Men nu börjar det redan bli svårt att inte lägga märke till antalet webbplatser som byggts på nätet, liksom antalet artiklar och lektioner om det. Tack vare det senare har det blivit mycket lättare att studera och förstå principerna och begreppen, att dra mer eller mindre verkliga slutsatser. Min slutsats ett år senare är denna - "Detta är en enkel och användbar lösning som någonsin skapats för webbsideslayout, borde varje webbdesigner med självrespekt veta."
Vad som är ett rutnät vet alla som någonsin har arbetat med grafiska redaktörer (Photoshop, Fireworks, Gimp, etc.) och, naturligtvis, uppskattade dess nödvändighet i skapandet av någon design. Men hur implementerar du Grid på webben? Faktiskt Tabellform Layouten var en riktig design för webbsidor med ett Grid, utan tvekan mycket användarvänlig. Men inte den avsedda användningen av elementen tabell livrädd.
Lyckligtvis har webbstandardernas enorma popularitet vuxit och fortsätter att växa senaste åren, såväl som deras stöd av moderna webbläsare, gav oss möjligheten att skapa multifunktionella sidor med mycket liten, logisk markering. Denna layout fick namnet Blockig... Men också Blockig layout visade sig vara svag sida... När du skapar sidor med en enorm uppsättning element av olika storlekar och betydelser har layouten av sådana sidor blivit en mycket svår uppgift, och om mer än en person arbetar med uppmärkningen kan sådant arbete bli en mardröm.
Och nu kom tekniken med hjälp av Grid till undsättning. Denna teknik är en hybrid mellan Blockig och Tabellform layout. Att använda det ger oss:
- snabbhet och enkel utveckling
- positioneringsfrihet
- sidelementens proportionalitet och deras placering
Vad är Grid Layout? För det första är det ett koncept. Ett koncept som innehåller många designaspekter och väldigt få regler för dess genomförande. Detta ger fullständig frihet och ingen standardisering i dess prestanda. Jag kommer att säga ännu mer - ett och samma Grid kan implementeras med samma olika sätt... Om du redan har läst om Grid, kanske du har märkt att varje författare börjar från en ny sida, går djupt in i detaljerna, detta är milt uttryckt förvirrande. Lyckligtvis började dyka upp Gridsystem- CSS-bibliotek för att arbeta med Grid. Och genom deras exempel kan du mycket snabbt bemästra de grundläggande principerna för denna teknik.
Jag tycker att det inte är meningsfullt att skriva om alla aspekter av Grid, du kan enkelt hitta information om det på Internet. Jag föreslår att skapa din egen opretentiösa Rutsystem.
Först måste du förstå att rutnätet består av kolumner och mellanrum mellan dem. Det finns tre huvuddimensioner - rutnätsbredd, kolumnbredd och kolumnavstånd. Bredden på kolumnerna beror på deras antal.
Låt oss försöka göra ett rutnät 950 pixlar brett med 16 kolumner åtskilda med 10 pixlar, det visar sig att en kolumn ska vara 50 pixlar bred. Efter att ha förstått alla värden öppnar vi vilken grafisk editor som helst som vi känner till och skapar en layout. Du kan också lägga till indrag i Grid från vänster och från höger, låt oss säga 20 pixlar vardera, och då får du en layout med en bredd på 990 pixlar. Du kan se mitt exempel.
Nu kan vi börja bygga vårt bibliotek. Liksom de flesta CSS-bibliotek som vårt behöver en global återställning, föreslår jag att Eric Meyers CSS-återställning behåller reset.css skapa grid.css där vi omedelbart kan lägga till en metod för rengöring av behållare som innehåller flytande block - Clear Fix. Det första vi behöver är en regel för behållaren som kommer att innehålla alla våra kolumner. Bredden på varje container är samma bredd som vårt galler.
.behållare (
marginal: 0 auto;
bredd: 950px;
}
Nu kan vi lägga till en regel för våra kolumner, den innehåller bredd och utfyllnad. Indrag fungerar som en lucka (ränna) mellan kolumner.
.column (
flyta till vänster;
marginal-höger: 10px;
overflow: gömd;
bredd: 50px;
}
För den sista kolumnen behövs inget indrag, för detta lägger vi till en regel för det:
Våra containrar innehåller kolonner, kolonnerna är flytande block, så de måste saneras. För att undvika onödiga .clearfixes i din uppmärkning kan du även tillämpa den här regeln på behållare:
.clearfix: efter, .container: efter{
innehåll: ".";
display: block;
höjd: 0;
klara: båda;
synlighet: dold;
}Clearfix, .behållare(display: inline-block;)
/ * Döljer sig från IE-mac \ * /
* html .clearfix, * html .container(höjd: 1%;)
.clearfix, .behållare(visa: block;)
/ * Avsluta dölj från IE-mac * /
Nu kan vi komma ner till våra kolumner. Kolumner kan vara så breda som två eller tre, och så vidare. För att göra detta kan vi tillämpa följande regler på dem:
.span-1 (bredd: 50px;)
.span-2 (bredd: 110px;)
.span-3 (bredd: 170px;)
.span-4 (bredd: 230px;)
.span-5 (bredd: 290px;)
.span-6 (bredd: 350px;)
.span-7 (bredd: 410px;)
.span-8 (bredd: 470px;)
.span-9 (bredd: 530px;)
.span-10 (bredd: 590px;)
.span-11 (bredd: 650px;)
.span-12 (bredd: 710px;)
.span-13 (bredd: 770px;)
.span-14 (bredd: 830px;)
.span-15 (bredd: 890px;)
.span-16 (bredd: 950px; marginal-höger: 0;)
I princip är detta allt som behövs för Grid-implementeringarna, du kan även lägga till en wrapper och en klass för att se Grid med en layout. Låt oss skapa main.css och lägg till det:
.wrapper (
marginal: 0 auto;
bredd: 990px;
}
.overlay (
bakgrund: genomskinlig url (overlay.png) repetera-y rulla upp till vänster;
}
Så här kan layouten se ut:
Jag tror att det räcker till en början.
Du kan se mitt exempel
I den här artikeln hittar du full kurs på CSS-rutnät. Vi kommer att analysera vad det är, vad som är annorlunda med FlexBox och hur du kan arbeta med CSS Grid.
CSS-rutnät är ett nytt tillvägagångssätt för att skapa responsiva sajter med många block placerade var som helst på sajten. Dessutom CSS Grid det finns också en teknik som är väldigt lik mesh. Vi kommer inte att förstå de minsta skillnaderna mellan dem, eftersom detta kommer att kräva en separat artikel, men vi kommer kort att beskriva de viktigaste skillnaderna.
CSS Grid kan kallas en coolare och bättre version FlexBox, eftersom FlexBox låter dig arbeta i endast ett plan: antingen skapa kolumner eller skapa rader.
CSS-rutnät låter dig göra mer eftersom de fungerar i båda planen samtidigt. Således är skapandet av responsiva webbplatsblock mycket lättare, och möjligheterna att arrangera objekt som du vill är helt enkelt oändliga.
Vi inbjuder dig att titta på en fullständig video om att lära dig CSS-rutnät för att få ett omedelbart grepp om essensen. CSS Grid:
- Lektion om;
Under lektionen skapades tre sidor, du kan kopiera koden för varje sida nedan.
Första filen
Andra filen
Tredje filen
Funktionsprincip
Att arbeta med rutnät är väldigt enkelt. Algoritmen för åtgärder här är som följer:
- Skapa ett huvudblock och placera andra block i det ( sektion);
- Lägg till egenskapen display: grid till huvudblocket;
- CSS-rutnätsegenskaper kan nu tillämpas på alla element i huvudblocket;
- Lägg till olika egenskaper. Du kan göra dokumentationen för alla möjliga egenskaper;
Varje block kan ställas in på dess bredd, höjd och dess plats. Block som skapas på basis av rutnät har omedelbart adaptiv design som justerar block för olika skärmupplösningar.
På så sätt kan du skriva mindre och få mer. Vad mer kan vara coolare? Dela din erfarenhet av att använda rutnät i dina projekt i kommentarerna till den här artikeln. ⇣
Från författaren: artikel från serien Concept of CSS Grid Layout. I tidigare lektioner har vi utforskat syntaxen för rutnät, lärt oss flera sätt att ordna element på en sida och sagt adjö till några gamla vanor. I den här handledningen kommer vi att tillämpa all vår kunskap för att skapa responsiv layout på praktiken.
Mediafrågor
Låt oss ta en demo från föregående handledning.
Sidan består av två rutnät: huvudrutnätet och ett kapslat rutnät inuti ett av elementen. Vi kan styra våra nät med mediafrågor. Detta innebär att vi helt kan omarrangera layouten för att passa olika skärmbredder.
Vi börjar med att kopiera deklarationen för det första rutnätet. Låt oss slå in dubbletten i en mobilförst mediefråga. Jag har godtyckligt valt 500px för övergångspunkten.
Grid-1 (/ * grid styles * /) @media only screen och (min-width: 500px) (.grid-1 (/ * grid styles * /))
Vi kommer nu att ändra vårt rutnät i den första deklarationen genom att placera allt i en kolumn. Vi ställer in en kolumn med egenskapen grid-template-columns. Kontrollera att våra fyra rader är inställda med egenskapen grid-template-rows och matchar layouten med grid-template-areas-egenskapen:
Grid-1 (display: grid; width: 100%; marginal: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-mall-areas: " sidhuvud "" huvud "" sidofält "" sidfot ";)
Rutnät - 1 ( display: rutnät; bredd: 100%; marginal: 0 auto; rutnät - mall - kolumner: 1fr; rutnät - mall - rader: 80px auto auto 80px; rutnät - gap: 10px; rutnät - mall - områden: "huvud" "huvudsaklig" "sidofält" "sidfot"; |
För att passa in på små skärmar ställer vi in rutnätsgapet till 10px som standard. Här är vad vi fick. Du bör också märka att vi förändras stoppningsegenskaper och teckensnittsstorlek på .grid-1 div-element med hjälp av mediafrågor.
Vårt kapslade rutnät
Koden ovan ändrar vår huvudlayout. Vi har dock fortfarande ett kapslat rutnät som envist vägrar att bli av med sina två kolumner på några skärmar. För att åtgärda detta kommer vi att göra exakt samma sak, men ta en annan övergångspunkt med hjälp av content-first-metoden:
Objekt-2 (/ * rutnätsstilar * /) @media only-skärm och (min-bredd: 600px) (.item-2 (/ * rutnätsstilar * /))
Om vi gjorde om demon för autoslutförande och ändrar kolumnbredderna till minmax (9em, 1fr), skulle rutnätet försöka rymma så många 9em-spår som möjligt och sedan utöka dem till 1fr tills hela behållaren är full:
Nackdel: rutnätet kommer bara att räkna om spåren efter en omstart, och inte när fönstrets bredd ändras. Försök att begränsa ditt webbläsarfönster och uppdatera sidan. Du kan koppla mediefrågor för att ändra värdena, men de är inte bra på att ändra bredden på webbläsarfönstret.
Slutsats
Låt oss sammanfatta allt ovan i listan:
Mediefrågor tillåter oss att bygga om rutnätet helt och hållet genom att modifiera egenskapen grid-template-areas (och andra) för olika scenarier.
Övergångsegenskapen har ingen effekt på rutnätets layout.
Mesh är bra för att fylla behållare nyckelord automatisk fyllning.
Minmax ()-funktionen kompletterar autocomplete på ett bra sätt, men den ger oss inte riktigt lyhördhet.
Du är nu redo att arbeta med mesh! Håll utkik efter fler CSS Grid-artiklar, praktiska övningar och lösningar på vanliga rutnätsproblem.
Från författaren: när man bygger komplexa platser är rutnät av yttersta vikt. Deras betydelse i modern webbdesign blir tydlig när man bara tittar på antalet ramverk som har implementerat denna teknik för att påskynda utvecklingen.
Efter att ha bekantat dig med CSS Grid Layout-specifikationen behöver du inte längre göra det separata filer Stilar om du vill arbeta med rutsystemet. Ett lika viktigt plus är att du inte längre kommer att lita på inline- och flytegenskaper för att placera element på sidan. I den här handledningen kommer vi att utforska grunderna i rutnätssystem och även skapa en enkel blogglayout.
Webbläsarstöd
På det här ögonblicket endast IE 10+ och Edge stöder Grid Layout-specifikationen - på kommersiella webbplatser denna teknik du kan inte använda den ännu.
I Chrome kan det här alternativet aktiveras genom flaggan "Experimentella webbplattformsfunktioner" i chrome: // flaggor. I Firefox är flaggan layout.css.grid.enabled.
Ett annat alternativ är att använda en polyfill, och ja, det finns en CSS Grid Polyfill! Du kan dra nytta av något av de tre beskrivna alternativen och lära dig Grid Layout medan du fortfarande är i ett tidigt utvecklingsstadium.
Observera: IE fungerar för närvarande gammal version specifikation, vilket innebär att webbläsaren inte fullt ut stöder den nya specifikationen. När vi kommer till exempel rekommenderar jag att du använder Chrome eller Firefox.
Grid System Terminologi
När det kommer till positioneringselement är CSS Grid-system tabeller. men detta verktyg mycket kraftfullare och mer varierad. I det här avsnittet kommer jag att prata om några termer som du måste komma ihåg när du arbetar med mesh:
Fr-enheter: används för att ställa in storleken ledigt utrymme... Används i kombination med rutnätsrader och rutnätskolumner. Från specifikationen: "Fördelningen av utrymme sker först efter att alla" längder "eller storlekar på rader och kolumner med innehåll har nått sin maximala storlek"
Linjer: Linjer markerar gränserna för andra element. De är både horisontella och vertikala. På bilden nedan finns 4 vertikala och 4 horisontella linjer.
Spår: Spår är utrymmet mellan parallella linjer. På bilden nedan finns 3 vertikala och 3 horisontella spår.
Celler: Celler är byggstenarna i rutnätet. Det finns 9 celler totalt i bilden nedan.
Ytor: Area är en rektangel som består av ett godtyckligt antal celler. De där. ett spår är både ett område och en cell.
Placering av objekt i rutnätet
Låt oss börja med grunderna. I det här avsnittet kommer jag att visa dig hur du använder ett rutnät för att placera objekt på specifika platser. För att arbeta med CSS Grid Layout måste du skapa ett överordnat element och ett eller flera underordnade element. Till exempel tar jag uppmärkningen nedan:
< div class = "grid-container" > < div class = "grid-element item-a" >A< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >D< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div > |
För att skapa ett rutnät måste behållaren ange visningen: rutnät eller skärm: inline-rutnätsegenskaper, såväl som andra stilar:
Grid-container (display: grid; grid-mall-columns: 200px 10px 0.3fr 10px 0.7fr; grid-mall-rader: auto 20px auto;)
Grid - container ( display: rutnät; rutnät - mall - kolumner: 200px 10px 0.3fr 10px 0.7fr; rutnät - mall - rader: auto 20px auto; |
Egenskaperna grid-template-columns och grid-template-rows anger bredden på rader och kolumner. I exemplet ovan har jag skapat 5 kolumner. En 10px bred kolumn används som en separator mellan elementen. Den första kolumnen är 200px bred. Den tredje kolumnen tar upp 0,3 delar av det återstående utrymmet. Och den femte kolumnen tar upp 0,7 av det återstående utrymmet.
Eftersom den första raden är inställd på egenskapen grid-template-rows: auto, tillåter detta att raden expanderas när innehåll läggs till. En 20px-linje fungerar som en separator. I demon nedan kan du se att elementen är hårt pressade mot varandra.
Var uppmärksam på punkt B - den finns i den andra kolumnen, som vi använder som en separator. Om placeringen av elementen inte ställs in manuellt, kommer webbläsaren att placera elementen i cellerna från vänster till höger, och om de inte passar i en rad, kommer de återstående att hoppa till den andra raden. Det är därför vi lämnade 4 reservkolumner på den andra raden.
För att flytta ett element till en given cell i rutnätet är det nödvändigt att ställa in placeringen av detta element genom CSS. Innan jag förklarar hur man flyttar rutnätsobjekten, ta en titt på bilden nedan.
I det här exemplet kommer vi att använda ett linjärt placeringssystem. Det linjära systemet innebär att linjerna i rutnätet kommer att spela en dominerande roll i placeringen av element. Låt oss ta element B. Horisontellt börjar detta block på den tredje raden och slutar på 4 kolumnlinjer. Bortom de vertikala linjerna givet element placerad mellan linjerna på första och andra raden.
För att ställa in den vertikala startlinjen för ett element kommer vi att använda egenskapen grid-column-start. I vårt fall kommer värdet att vara 3. Egenskapen grid-column-end pekar på elementets vertikala slutlinje. I vårt fall är detta 4. Värden för horisontella linjer ställs ut på samma sätt.
Baserat på ovanstående drar vi slutsatsen att för att flytta element B till den andra cellen måste du använda koden:
Element-b (rutnät-kolumn-start: 3; rutnät-kolumn-slut: 4; rutnät-rad-start: 1; rutnät-rad-slut: 2;)
Element - b ( rutnät - kolumn - start: 3; rutnät - kolumn - slut: 4; rutnät - rad - start: 1; rutnät - rad - slut: 2; |
På samma sätt, för att flytta F-elementet till den sjätte cellen, måste du:
Element-f (rutnät-kolumn-start: 5; rutnät-kolumn-slut: 6; rutnät-rad-start: 3; rutnät-rad-slut: 4;)
Element - f ( rutnät - kolumn - start: 5; rutnät - kolumn - slut: 6; rutnät - rad - start: 3; rutnät - rad - slut: 4; |
Skapa en grundläggande layout
Nu ska vi skapa en grundläggande blogglayout med sidhuvud, sidfot, sidofält och två innehållssektioner. Först markeringen:
< div class = "grid-container" > < div class = "grid-element header" >Rubrik< / div > < div class = "grid-element sidebar" >Sidofält< / div > < div class = "grid-element main" >Huvudinnehåll< / div > < div class = "grid-element extra" >Extra info< / div > < div class = "grid-element footer" >Sidfot< / div > < / div > |
Kom ihåg att ordningen som taggarna placeras i i uppmärkningen inte på något sätt påverkar placeringen av elementen på webbsidan. Utan att ändra CSS kan du sätta sidfoten i markeringen ovanför sidhuvudet, men placeringen av elementen kommer fortfarande att förbli densamma. Men jag rekommenderar inte att du gör det. Huvudpoängen här är att markeringen inte längre talar om för dig var elementet kommer att placeras.
Det återstår för oss att bestämma värdena för egenskaperna för grid-row-end-typen för alla element. Som i föregående exempel kommer vi att använda ett rutnätsdiagram för att bestämma egenskapsvärden.
Hej alla! Idag ska vi prata om vad är nätsystem eller bara flexibel mesh in adaptiv layout .
Först ger vi en definition av vad som är Rutsystem.
Rutsystem- en samling klassbaserade stilar som låter användaren styra sidlayouten med hjälp av ett rad- och kolumnsystem.
Låt oss säga att vi har en bloggsida. Den är uppdelad i 2 kolumner: huvuddelen till vänster och sidofältet till höger. Låt oss försöka skapa ett flexibelt rutnät för en sådan sida.
Tja, till att börja med måste vi göra, om än elementärt, men html pålägg.
Här har vi ett block som innehåller hela sidan, det innehåller ett block med en blogg, som innehåller 2 block: huvuddelen av sidan och sidofältet.
Så hela vår sida kommer att vara i storlek 960 pixlar... Hela rutnätet är uppdelat i 12 kolumner av 69px... varenda en. Avsnittet för bloggen kommer att vara bredden 900 pixlar... Huvuddelen av sidan kommer att vara 566 pixlar, sidofält - 331 pixlar.
Detta är vad vi får till slut
#sida (
marginal: 36px auto;
bredd: 960px;
}
Blogg (
marginal: 0 auto 53px;
bredd: 900px;
}
Blogg .main (
flyta till vänster;
bredd: 566px;
}
Blogg .sidebar (
flyta: höger;
bredd: 331px;
}
Allt är bra, men som du kan se är allt detta statiskt, givet i pixlar. Vi vill att vårt rutnät ska ändra sin storlek beroende på vilken skärm sidan visas på, därför måste vi ställa in allt i procent... Vi gör det.
För detta finns det fortfarande samma formel som för typsnitt.
mål / sammanhang = resultat
Låt oss konvertera blocket på hela sidan från pixlar till procent.
#sida (
marginal: 36px auto;
bredd: 90%;
}
90% valt eftersom vi i det här fallet även kommer att ha marginaler längs kanterna. 5% ... Du kan dock välja ett annat värde.
Vi använder vår formel: 900 / 960 = 0.9357
Multiplicera resultatet med 100 för att få intresse, och skriv i vår css.
Blogg (
marginal: 0 auto 53px;
bredd: 93,75%;
}
Gör samma sak för kolumnerna, men märk att sammanhanget har ändrats. Eftersom kolumner är inne i blocket med klassen .blogg, då blir det sammanhanget. Låt oss räkna.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
Vi omvandlar allt till procent och skriver till stilmallen.
Blogg .main (
flyta till vänster;
bredd: 62,8888889%;
}
Blogg .sidebar (
flyta: höger;
bredd: 36,7777778%;
}
Det är allt! Nu har vi ett flexibelt rutnät och kan använda det för layout.
Som du kan se är allt väldigt enkelt. Ett flexibelt rutnät, som ett flexibelt typsnitt, är baserat på samma formel, med tanke på vilken du kan skapa responsiva webbplatser utan problem.
Anteckningen! Som ni ser hamnade vi på ganska långa procentsatser. Vissa kanske råder dig att runda dem, men detta bör aldrig göras! Kom ihåg!
Och det var allt för mig, tack för din uppmärksamhet och framgångsrika responsiva layout!