En annan Samling av Intressanta Fakta Om CSS Nätet

0
34

Förra året, jag monterat En Samling av Intressanta Fakta om CSS-Grid Layout efter att ge en workshop. Detta år har jag arbetat på en annan verkstad och jag har lärt mig lite mer spännande fakta om layouten spec vi alla älskar så.

Naturligtvis, jag kommer inte att hålla min kunskap till mig själv. Jag är glad att dela mina slutsatser än en gång med dig, CSS-Tricks gemenskapen.

Att förstå hur “grid” – genväg fungerar

Ibland, läsa och förstå delar av grid—eller egentligen någon annan—spec kan vara mycket svårt.

Till exempel, det tog mig ett tag att förstå hur man använder nätet för shorthand på rätt sätt. Specifikationen säger att den giltiga värden är:

<‘grid-mall’> | <‘grid-template-rader’> / [ auto-flöde && tät? ] <‘grid-auto-kolumner’>? | [ auto-flöde && tät? ] <‘grid-autwo-rader’>? / <‘grid-template-kolumner’>

Kan du begripa det, om du tar din tid eller om du är erfaren i att läsa specifikationer. Jag försökte flera kombinationer och alla av dem inte. Vad som till slut hjälpte mig var en notering i spec:

Observera att du endast kan ange explicit eller implicit grid egenskaper i ett enda nät förklaring.

Rachel Andrew har en rad tjänster som hjälper till att förklara hur man läser en specifikation, med hjälp av CSS Nätet som ett exempel.

Så, vi kan ange en mängd saker via nätet stenografi, men inte alla av dem på en gång. Här är några exempel.

Med hjälp av ” nät “till förmån för ” grid-mall”

Grid-mall egendom är en förkortning för inställning grid-template-kolumner, grid-template-rader, och grid-template-områden i en enda deklaration. Vi kan göra samma sak med nätet stenografi, som är lite kortare.

rutnät: “en till en” 200px
“två, fyra”
“tre till fyra”
/ 1fr 2fr;

/* en förkortning för: */
/*
grid-template-områden: “en till en”, “två, fyra” “tre till fyra”;
grid-template-rader: 200px;
grid-template-kolumner: 1fr 2fr;
*/

Denna förkortning som skapar tre rader och två kolumner, med fyra heter grid-områden. Den första raden har en uttalad höjd av 200px, medan den andra och den tredje har en implicit höjd auto. Den första kolumnen har en bredd av 1fr och den andra en bredd av 2fr.

Se Pennan nätet shorthand – områden, explicit rader och kolumner av Manuel Matuzovic (@matuzo) på CodePen.

Vill du veta mer om skillnaden mellan en explicit och en implicit nätet? Kolla in det här inlägget jag skrev om ämnet här på CSS-Tricks.

Vi behöver inte ange områden om vi inte behöver dem. Vi kan använda nätet för shorthand bara för att explicit definiera rader och kolumner. Följande två utdrag huvudsak gör samma sak:

grid-template-rader: 100px 300px;
grid-template-kolumner: 3fr 1fr;
rutnät: 100px 300px / 3fr 1fr;
Hantering implicita rader och kolumner

Det är möjligt att använda nätet för shorthand för att ange grid-auto-flöde också, men inte exakt arbete som vi kan förvänta oss. Vi vill inte bara lägga till raden eller kolumnen sökord någonstans i deklarationen. Vi har istället för att använda auto-flöde sökord på rätt sida av snedstreck.

Om det är till vänster om snedstrecket, stenografi set grid-auto-flöde för att ro och skapar explicit kolumner.

rutnät: auto-flow / 200px 1fr;

/* en förkortning för: */
/*
grid-auto-flöde: rad;
grid-template-kolumner: 200px 1fr;
*/

Om det är till höger om snedstrecket, stenografi set grid-auto-flöde till kolumn och skapar explicit rader.

rutnät: 100px 300px / auto-flöde.

/* en förkortning för: */
/*
grid-template-rader: 100px 300px;
grid-auto-flöde: kolumnen.
*/

Vi kan också ställa in storleken på implicita spår tillsammans med auto-flöde sökord, som respektive set grid-auto-rader eller grid-auto-kolumner till det angivna värdet.

rutnät: 100px 300px / auto-flöde 200px;

/* en förkortning för: */
/*
grid-template-rader: 100px 300px;
grid-auto-flöde: kolumnen.
grid-auto-kolumner: 200px;
*/

Se Pennan nätet shorthand – explicit rader och implicita kolumner av Manuel Matuzovic (@matuzo) på CodePen.

Funktion frågor i Kanten

Kontrollera stöd för CSS Nätet fungerar bra med Har Frågor eftersom alla webbläsare som har stöd Nätet förstår också har frågor. Detta innebär att vi kan kontrollera om webbläsaren stöder den gamla eller den nya spec, eller både och. Både och, frågar du? Börjar med Kanten 16, Kant inte bara stöd för den nya specifikationen, men den gamla också.

Så, om du vill skilja mellan versioner av Kant som stöd för den nya spec och de som inte gör det, måste du skriva dina frågor så här:

/* Edge 16 och högre */
@stöd (display: -ms-grid) och (display: grid) {
div {
width: auto;
}
}

/* Edge 15 och lägre */
@stöd (display: -ms-grid) och inte (display: grid)) {
div {
margin: 0
}
}

Här är en behändig liten demo, som visar vilka inslag fråga triggers i den webbläsare du har öppnat det med.

Se pennskärm: grid stöd test av Manuel Matuzovic (@matuzo) på CodePen.

Som en sida noterar, du ska inte gå överbord med (mis)med hjälp av funktionen frågor för webbläsare sniffa, eftersom webbläsaren upptäckt är dåligt.

Ange det exakta antalet artiklar per kolumn

Nätet är bra för sidlayouter, men det kan vara mycket användbart på en komponent nivå. En av mina favorit exempel är möjligheten att ange den exakta mängden av objekt per kolumn i en multi-kolumn komponent.

Låt säga att vi har en lista på 11 punkter och vi vill lägga till en ny kolumn efter vart fjärde punkt. Det första vi vill göra när du ställer in andra display: rutnät på som förälder är att ändra det sätt på nätet auto-placering algoritm fungerar. Som standard, fyller i varje rad, i sin tur, lägga till nya rader som behövs. Om vi set grid-auto-flödet på kolumn nätet kommer att fylla varje kolumn i sin tur istället, vilket är vad vi vill. Det sista vi behöver göra är att ange antalet poster per kolumn. Detta är möjligt genom att definiera så många erotiska rader som behövs med grid-template-rader egendom. Vi kan ställa in höjden på varje rad uttryckligen eller bara göra dem så stora som deras innehåll genom att använda auto sökord.

ul {
display: nätet.
grid-template-rader: auto auto auto auto;

/* eller kortare och lättare att läsa: */
/* grid-template-rader: upprepa(4, auto); */
grid-auto-flöde: kolumnen.
}

Om vi har för att ändra antalet artiklar per kolumn 5, vi bara lägga till ett spår till spår eller gör vi använda repeat-notation istället och bara ändra den första parametern till önskat värde (grid-template-rader: upprepa(5, auto)).

Se Pennan Begränsat antal objekt per kolumn av Manuel Matuzovic (@matuzo) på CodePen.

Sticky sidfötter med CSS Nätet

Det finns många sätt att skapa klibbiga sidfötter i CSS. Några av dem är hacky och komplicerat, men det är ganska enkelt med Grid.

Låt säga att vi har en *classic* header, huvudsakliga innehåll och sidfot sidan struktur.

<body>
<header>RUBRIK</header>
<main>MAIN</main>
<footer>FOTNOT</footer>
</body>

För det första, vi ställa in höjden på html och kropp till minst 100% av visningsområdet för att se till att sidan använder alltid full vertikalt utrymme. Då vi tillämpar grid-template-rader för att dela upp kroppen i tre rader. Den första (rubrik) och den sista (sidfot) rad kan ha vilken storlek som vi vill ha. Om vi vill att de ska alltid vara så stor som deras innehåll, att vi helt enkelt ställa in höjden på auto. Raden i mitten (main) bör alltid fylla upp resten av utrymmet. Vi behöver inte beräkna höjden, eftersom vi kan använda den fraktion enhet för att uppnå detta.

html {
höjd: 100%;
}

body {
min-height: 100%;
display: nätet.
grid-template-rader: auto 1fr auto;
}

Som ett resultat, är den viktigaste organ växer och sidfot justerar därför och stannar kvar på botten av visningsområdet.

Se Pennan CSS Grid Layout Sticky Footer av Manuel Matuzovic (@matuzo) på CodePen.

Automatisk minsta storlek på rutnät artiklar

Nyligen, Florian twittrade att han undrar varför avkortning enda rad text i ett rutnät artikel var så komplicerat. Hans exempel perfekt illustrerar ett intressant faktum om grid objekt.

Utgångsläget är en tre-kolumn rutnät med en punkt i varje rutnät artikel.

<div class=”grid”>
<div class=”item”>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo ipsum exercitationem voluptate, autem veritatis enim soluta beatae odio accusamus molestiae, perspiciatis sunt maiores quam. Deserunt, aliquid inventore. Ullam, fugit dicta.
</p>
</div>
</div>
.grid {
display: nätet.
grid-template-kolumner: upprepa(3, 1fr);
grid-gap: 20px;
}

Varje stycke bör bara vara en enda linje och visa en sida i slutet av raden om den punkt som är längre än dess överordnade objekt. Florian har löst det genom att ställa white-space för att nowrap, som tvingar en enda linje, genom att dölja att flöda över och fastställa text-overflow till ellips.

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Detta skulle ha fungerat alldeles utmärkt på ett block-element, men i detta rutnät exempel kolumner utöka bredden på en enda linje punkt:

Se Pennan Automatiskt minsta storlek på rutnät artiklar av Manuel Matuzovic (@matuzo) på CodePen.

I stort sett sker detta, eftersom ett rutnät artikel kan inte vara mindre än sina barn. Standard-min-width av en grid-objekt (eller flex-post) är inställt på auto, vilket enligt spec:

…gäller en automatisk minsta storlek i den angivna axeln till nätet objekt vars spill är synliga och som sträcker sig minst ett spår vars min spåra dimensionering funktion är auto.

Detta gör att nätet och flex objekt mer flexibel, men ibland är det inte önskvärt att innehållet är möjligt att sträcka dess överordnade objekt bredd. För att undvika att vi kan ändra antingen overflow egendom grid-objektet till något annat än det synliga eller ställa in min-width till 0.

Se Pennan Korta Text i CSS Rutnät av Manuel Matuzovic (@matuzo) på CodePen.

Läs mer om Automatisk Minsta Storlek på Rutnät Artiklar på nätet spec.

Att linda upp

Förhoppningsvis kan dessa senare hämtställen hjälpa dig att känna dig mer bekväm att skriva och att använda Nätet som de har för mig. Det finns en hel del detaljer i denna nya specifikationen, men det blir mer intressant och begripligt med mer använda.