Share
Kortmönstret har haft stor framgång de senaste tiderna, men sättet att bygga dem är fortfarande begränsat på grund av CSS tillgängligt för oss. Hittills är det det. Genom att kombinera CSS Grid och Flexbox kan vi göra kort som stämmer snyggt, beter sig responsivt och vilka anpassar sig till innehållet inom dem. Låt oss se hur!
Vi kommer att bygga detta kort-användargränssnitt (kolla in hela sidversionen för en tydligare idé):
Vid olika brytpunkter ändras kortarrangemanget enligt följande:
1: liten, 2: medium, 3: stor viewportNär Flexbox träffade CSS-scenen kunde glädje höras över hela världen. äntligen hade vi en layout modul för att lösa alla våra float frustrationer. Men det var inte så. Flexbox fungerar bäst för att fördela element längs en enda axel; antingen horisontellt längs en rad, eller vertikalt som en kolumn. Att bygga ett riktigt flytande nät med Flexbox är svårt.
Rutnät, dock, är avsedd att lägga ut element över två axlar (eller dimensioner); vågrätt och vertikalt. I denna handledning kommer vi att använda var och en för det ändamål den var avsedd att ge oss en riktigt solid lösning. Låt oss börja!
Nyligen bbc.co.uk lanserade (i beta) deras senaste iteration, går rent och rymligt med deras kort UI. Ignorera de eländiga rubrikerna, det ser bra ut.
De bästa korten är byggda och inriktade över raden med Flexbox, men vi kommer att expandera på layouten med hjälp av Grid.
Notera: För att följa med behöver du en webbläsare som stöder Grid. Här är lite info för att komma igång.
Låt oss börja med ett omslag för vårt nät Placera så många kort som du vill, vi använder sju. Var och en har en miniatyrbild Låt oss nu sparka av några stilar genom att ordna varje av dessa objekt i ett rutnät. Notera: Om det här är din första fördämning i "Grid" kanske du vill få fart genom att läsa de första handledningarna i Förstå CSS Grid Layout. Vi kommer att gå mobila först här, så de första stilarna ger vår förpackning en bredd och centrerar den och ställer sedan in några Grid-regler: Viktigast, här säger vi att vår Då säger vi Slutligen definierar vi en På bredare visningar (500px är helt godtyckligt), ändrar vi Slutligen, för större skärmar går vi med en fyra kolumnlayout. Här kunde vi lika ha skrivit Så vad har det gett oss? Det har gett oss en ganska solid rutnätlayout, och om du är en fan av brutalism kanske du vill behålla saker som denna, men för alla andra låter vi göra våra kort ser lite mer ut som kort. Vi börjar med detta: Detta ger oss några grundläggande stilar: en vit bakgrund, ingen undertext för texten, en grå färg och en snygg Därefter förklarar vi kortet för att vara Låt oss göra några andra förbättringar innan du dyker längre in i Flexbox. Lägg till en Lyft sedan kortet på svävaren och gör skuggan mer uttalad: Nu lägger vi till några allmänna stilar för typografi för att ändra färgerna och avståndet. Här är vad du borde ha: Varje miniatyrbild kommer att appliceras som en bakgrundsbild, så vi lägger till lite markering över hela linjen, så här: Nu ska vi se till att Bra jobb, det ger oss det här: Nu vill vi att författarnamnet ska anpassas längst ner på kortet, oavsett hur mycket innehåll det finns ovanför det. Här kommer Flexbox igen: Vi använder stenografi Då förklara vi att artikeln är en flexbehållare i sin egen rätt, och vi förklarar igen Det är allt bra, men det ger oss dessa konstiga, vandrande punkter i mitten av våra kort. För att anpassa dessa ordentligt, låt oss lägga till Bättre! Vid den här tiden är vi ganska mycket insvept, men det enda som Grid tillåter oss att göra nu är att helt ändra layouten genom att placera våra rutnät varhelst vi vill, och i vilken storlek som helst. För denna demo ville vi göra det allra första kortet (låt oss kalla det vårt "utvalda kort") två kolumner breda för något annat än de minsta visningarna. I vår första mediefråga, låt oss göra det här: Harking tillbaka till vår inledande handledning om rutnätområden, här säger vi att, förutom 500px, bör det första objektet börja på raden 1 och spänna över två spår. Resten av rutnätet faller automatiskt på plats. Inom samma mediasökning har jag också stött på Detta har varit en bra övning i att använda Grid with Flexbox; Grid hanterade vår huvudsakliga tvådimensionella layout, sedan hanterade Flexbox den vertikala fördelningen av element inom våra kort. Ha det roligt att leka med det!, några rutnät för att ordna allt
, och några ankare (varje ankare blir ett kort):
som vi kommer att ge en bakgrundsbild senare. Då finns det en
, som i sin tur rymmer en , en för författaren, och kanske även en för lite mer information.Grid Basics
.band bredd: 90%; maxbredd: 1240px; marginal: 0 auto; display: rutnät; rutmall-kolumner: 1fr; rutnät-rader: auto; gallergap: 20px;
.band kommer vara display: rutnät;. Vi förklara sedan grid-template-kolonner av 1fr, som säger att varje kolumn kommer att ta upp en enda del av de tillgängliga. Vi har bara förklarat en för nu, så varje kolumn fyller hela bredden.rutnät-rader: auto;. Detta är faktiskt standardvärdet, så vi kunde ha utelämnat det, och innebär att raden höjder kommer att bestämmas rent av innehållet.grid-gap av 20px, vilket ger oss våra kolonn- och radrännor.Media Query Numero Uno
grid-template-kolonner att ge oss ett möjligt två kort per rad. Nu finns det två kolumner, var och en är en av de tillgängliga två fraktionerna.@media bara skärm och (minbredd: 500px) .band grid-mall-kolumner: 1fr 1fr;
Media Query Numero Dos
@media bara skärm och (min bredd: 850px) .band grid-mall-kolumner: 1fr 1fr 1fr 1fr;
upprepa (4, 1fr) istället för 1fr 1fr 1fr 1fr. För mer information om hur fr enhet fungerar, kolla in CSS Grid Layout: Fluid Columns och Better Gutters.Styling korten
.kort bakgrund: vit; text-dekoration: ingen; färg: # 444; boxskugga: 0 2px 5px rgba (0,0,0,0,1); display: flex; flex-riktning: kolumn; minhöjd: 100%;
box-shadow att ge oss lite djup.display: flex;. Detta är viktigt - vi anpassar innehållet på kortet vertikalt med hjälp av Flexbox. Därför anger vi också flex-riktning: kolumn; att ge oss vår vertikala axel. Slutligen förklarar vi minhöjd: 100%; så att alla korten fyller höjden på föräldern (vårt objekt). Bra jobbat! Det ger oss detta:
Hover State
position: relativ; och a övergång så att vi kan flytta kortet på svävaren: position: relativ; topp: 0; övergång: alla .1s enkelt in;
.kort: svävar topp: -2px; boxskugga: 0 4px 5px rgba (0,0,0,0,2);
Typografi
.kortartikel vaddering: 20px; / * typografi * / .card h1 font-size: 20px; marginal: 0; färg: # 333; .card p linjehöjd: 1,4; .card span font-size: 12px; font-weight: bold; färg: # 999; text-transform: stor bokstav; brevavstånd: .05em; marginal: 2em 0 0 0;
miniatyrer
.tumme divs har några dimensioner, och att bakgrundsbilderna fyller dem ordentligt:.kort .thumb padding-bottom: 60%; bakgrundsstorlek: omslag; bakgrundsställning: center center;
Flexbox Artikel
.kortartikel vaddering: 20px; flex: 1; display: flex; flex-riktning: kolumn; motivera innehåll: mellanslag mellan;
flex: 1; att ange att detta flex-objekt (det är fortfarande ett barn i den ursprungliga flexbehållaren) borde växa för att ta upp allt ledigt utrymme.flex-riktning: kolumn; att ge oss vertikal fördelning. Slutligen, motivera innehåll: mellanslag mellan; säger att alla flex-objekt inom den ska sprida sig jämnt längs axeln, med lika avstånd mellan.
flex-grow: 1; (eller bara flex: 1;) till dem, så de fyller hela det återstående vertikala utrymmet och anpassar sig snyggt till toppen..kort p flex: 1; / * gör p växa för att fylla tillgängligt utrymme * / linjehöjd: 1,4;
Ändra rutnätet
@media only screen och (minbredd: 500px) ... item-1 rutnät-kolumn: 1 / span 2;
textstorlek av rubriken i vårt utvalda kort.Slutsats
Vidare läsning
Accentsconagua