CSS-Grid, DVS: att Skapa en Auto-Placering Rutnät med Luckor

0
17

Detta är den tredje och avslutande delen i en tre-serie om hur du använder CSS nätet på ett säkert sätt i Internet Explorer 11 (IE11) utan att bli galen.

I Del 1, jag har täckt några av de vanliga missuppfattningar som människor har om IE11 infödda CSS elnät genomförandet. I Del 2, jag visade världen hur lätt det faktiskt är att skriva IE-vänliga CSS-grid-kod.

Idag ska jag steg bort från CSS nätet för en stund att visa en flexbox teknik som replikerar grundläggande CSS-grid auto-placering funktionalitet. Denna CSS-nätet replica kommer även se ut som en grid-gapet har tillämpats på det. Jag måste vara super dock klart: det handlar inte om hur man gör själva CSS-grid auto-placering fungerar i IE.

Artikel-Serien:

  1. Avslöja Gemensamma IE Nätet Missuppfattningar
  2. CSS Nätet och den nya Autoprefixer
  3. Att fejka en automatisk placering rutnät med luckor (Detta Inlägg)

Hur man gör en falsk rutnät med cell luckor

Steg 1: HTML

Jag kommer att använda denna grundläggande HTML som ett exempel:

<div class=”grid-wrapper”>

<div class=”grid”>
<div class=”grid-cell”></div>
<div class=”grid-cell”></div>
<div class=”grid-cell”></div>
<div class=”grid-cell”></div>
<div class=”grid-cell”></div>
<div class=”grid-cell”></div>
</div>

</div>
Steg 2: Border-box sizing

Det första som vi behöver göra i CSS är att se till att alla rutor är dimensionerade baserat på border-box snarare än innehåll-rutan. Det bästa sättet att göra det är att använda box-sizing: border-box arv teknik:

html {
box-sizing: border-box;
}

*, *::före, *::efter {
box-sizing: inherit;
}

Som kommer att tillämpas globalt. Om du arbetar på ett befintligt projekt som inte har box-sizing inställd på att border-box, och sedan ändra i html-snutten till en väljare som mål elementet som du vill förvandla till ett rutnät.

Steg 3: Flex

Nästa, måste du slå på några flexbox inställningar:

.grid {
/* Krafter som är lika stora cell höjder */
display: flex;
flex-wrap: wrap;
}
Steg 4: Bredder

Ställ nu upp din kolumnbredder. Vi ska göra oss en enkel tre-kolumn nätet:

.grid-cell {
/* Anger kolumnen räknas */
bredd: calc(100% / 3); /* calc () – metoden */
bredd: 33.33%; /* andel metod */
}

Calc() metoden gör det möjligt att kolumnbredden ändras lite lättare. Du anger hur många kolumner du vill ha och webbläsare är matematik för dig. Detta är särskilt praktiskt när du behöver ett större antal kolumner, som 7 eller 8. Webbläsaren har stöd för calc() är stark men inte så stark som en raw-andel värde som har fått stöd av webbläsare sedan början av CSS.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Inga 67 67 60

Andelen metod har något bättre webbläsare stödja och kan vara lite mer stabil i IE. Om du inte behöver stöd för Opera Mini, jag skulle ändå rekommendera att gå med calc () – metod först. Testa i IE, och om layouten raster, första försöket med 99.999% istället för 100% i calc-funktion (calc(99.999% / 3)). Om det inte fungerar så prova att byta till den procentsats som metod. Jag kommer att använda calc () – metoden i alla mina exempel. Observera att om du använder en CSS-pre-processor som SCSS, du kan få det bästa av två världar genom att få pre-processor för att göra matten för dig. Detta sker på bekostnad av att inte vara lika lätt kunna redigera eller granska den kolumn som räknas i webbläsaren dev verktyg.

/* Ställ kolumn räkna med SCSS */
.grid-cell {
bredd: (100% / 3);
}

/* CSS-utdata till webbläsaren */
.grid-cell {
bredd: 33.3333333333 procent.
}

Låt oss ge rutorna lite höjd och en inre box-shadow, så att vi kan se vad som händer. Jag tänker inte lägga till gränsen — jag kommer att använda det senare. 😉

.grid-cell {
/* Så att vi kan se rutorna */
box-shadow: infälld 0 0 0 1px #000;
höjd: 100px;
}

.grid-wrapper {
/* Gör det möjligt för oss att se kanterna på nätet */
box-shadow: 0 0 10px 2px grön;
}

Nu bör du ha något som ser ut så här:

En grundläggande 3 x 2 rutnät med luckor

Det är tråkigt om, eller hur? Alla vet hur man gör det. Var finns dessa rutnät luckor jag pratar om? Jag vill att mina luckor!!!

Steg 5: Border

Här är där vi kommer till det intressanta. Eftersom vi satt box-sizing till border-box, 33.33% bredd nu har gränsen. Vad detta innebär är att vi kan börja på ett säkert sätt blanda fasta och andel baserade enheter! 😃

.grid {
/* Skapar en lika yttre lucka */
padding: 20px 0 0 20px;
}

.grid-cell {
/* Skapar luckor */
border: 0 solid transparent.
border-width: 0 20px 20px 0;
}

Detta resulterar i något som ser ut som ett rutnät med lika avstånd överallt:

En 3 x 2 rutnät med lika mellanrum mellan varje cell och ytterkanterna på nätet

För att ge dig en bättre uppfattning om vad som är på gång, ta en titt på följande bild:

Färgkodade diagram över nätet

Det blå området på den övre och vänstra sidan av rutnätet är utfyllnad för det .grid element. Den gula beskriver visa det område som vardera .grid-cell element tar upp. De röda områdena på botten och höger sidorna av varje cell är gränsen för var och en .grid-cell element.

Det kan vara utseende som du faktiskt vill ha. Å andra sidan, det är inte vad ett rutnät med en grid-gap inställning ser ut. Det är därför vi har ytterligare ett steg.

Steg 6: Marginal och bräddavlopp

För att få nätet att trycka hårt mot kanterna av dess behållare, vi behöver lite hjälp från negativa marginaler och overflow: hidden:

.grid {
/* Drar rutorna hårt mot kanterna */
marginal: -20px;
}

.grid-wrapper {
/* Förhindrar udda marginal beteende */
overflow: hidden;
}

Vi måste tillämpa overflow: hidden för att förhindra att detta händer:

Toppen och botten negativ marginal ignoreras om översvämningen är inte dold

Att tillämpa negativ marginal och overflow: hidden kommer att ta oss till denna vackra rekreation av grundläggande grid-gap funktionalitet:

En 3 x 2 rutnät som ser identisk till en CSS-nätet med en lucka inställning

Den övre och vänstra utfyllnad på nätet är faktiskt frivilligt. Du kan välja att lämna bort stoppningen och byta marginal värde som visas nedan om du föredrar:

.grid {
/* Marginal måste vara detta om du lämnar bort toppen och vänster .galler stoppning */
margin: 0 -20px -20px 0;
}

Men, håll på! Jobbet är inte riktigt över ännu. Ta en titt på vad som händer om vi lägger till en bakgrundsfärg till en av rutorna:

En rosa bakgrund tillämpas på den övre vänstra cellen svämmar över i grid gap

Inte precis vad vi vill, så det är ett steg till.

Steg 7: bakgrund-klipp

För att förhindra att nätet cell bakgrund från blödning i våra falska grid-gapet, som vi behöver för att lägga till bakgrunden-klipp: padding-rutan.

.grid-cell {
/* Förhindrar bakgrund utfallande */
bakgrund-klipp: padding-box;
}

Nu har vi detta:

Bakgrunden blöda har varit fast!

Om du har aldrig hört talas om bakgrunden-klipp fastigheten innan, du kan vara orolig om webbläsaren stöd… väl inte vara. bakgrund-klippet har funnits sedan IE9!

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
15 10.5 4 9 12 7

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1 10 alla 4.4 67 60

Steg 8: Media Frågor!

De flesta av tiden, näten måste för att kunna ändra antal kolumner som de har när de växer och krymper. Med andra metoder kan vara en enorm smärta. Du kanske har för att beräkna ett gäng n: te-childs så att du kan ta bort den högra marginalen eller vad som helst. Med den här metoden kan du bara ändra ett enskilt värde! 😃

.grid-cell {
/* Anger standard för kolumn räkna */
bredd: calc(100% / 1); /* 1 kolumn */
}

@media (min-width: 400px){
.grid-cell {
bredd: calc(100% / 2); /* 2 kolumner */
}
}

@media (min-width: 600px){
.grid-cell {
bredd: calc(100% / 3); /* 3 kolumner */
}
}

3 x 2 rutnät med luckor
2 x 3 rutnät med luckor
1 x 6 rutnät med luckor

Så här ser det ut när vi sätter ihop det hela:

Se Pennan Falska rutnät av Daniel Tonon (@daniel-tonon) på CodePen.

Ain ‘ t nobody got time for dat!

Det är en hel del arbete jämfört med vad moderna Rutnät kan göra på bara tre rader CSS! För att göra uppgiften lättare, jag skapade en SCSS-drivna mixin jag kallar Rännstenen Nätet. När Rännan Nätet är installerat i projektet, kan du snabbt skapa en tre-kolumn rutnät med 20px luckor med hjälp av följande SCSS-kod:

.grid-wrapper {
overflow: hidden; /* Behöver detta för chrome bug */
}

.grid {
@inkluderar grid($cols: 3, $rännstenen: 20px);
}

Du kan skriva det ännu kortare gilla detta om det känns för verbose:

.grid-wrapper {
overflow: hidden;
}

.grid {
@inkluderar grid(3, 20px);
}

Rännan Nätet kommer pre-byggd med ett par uppsättningar av brytpunkter så du kan inte skriva någon brytpunkter alls om din grid sträcker sig över hela sidan! Om du behöver anpassade brytpunkter, men då Rännan Nätet kan du enkelt anpassa dem så här:

// Verbose anpassad brytpunkter
@inkluderar grid($cols: 7, $rännstenen: 20px, $brytpunkter: (
4 : 960px, // I 960px eller lägre, kommer det att vara 4 kolumner
2 : (max 600px), // som Du kan använda mq-scss syntax här
1 : 480px,
));

// Kort version
@inkluderar grid(7, 20px, (
4 : 960px,
2 : 600px,
1 : 480px,
));

Som ni kanske har märkt i exemplet, Gutter Nätet stöder också samma media query syntax som denna sak kallad mq-scss använder. Om du undrar vad det är, tja, det är en Sass mixin som jag har skapat som gör att skriva och hantera media frågor om en miljon gånger lättare. Med hjälp av mq-scss-satser för att diktera kolumn räkna ger mycket bra kontroll över när den kolumn räkna förändringar.

Lägga till skuggor till nätet celler

Eftersom vi arbetar med skuggor nu, jag ska ta box shadow bort av exempel bilden. Vårt startfält ser ut så här nu:

En grundläggande 3 x 2 rutnät med luckor och en grön kant runt utsidan

Om vi försöker att lägga till en yttre box-shadow för att varje ruta i rutnätet just nu… ja det ser inte så bra:

Lägga till skuggor till nätet celler orsakar skuggor för att vara av anpassningen

Låt oss fixa det.

Steg 1: HTML

För att skapa trevliga skuggor, behöver vi lägga till en extra div inuti varje ruta i rutnätet. Du kan inte verkligen använda ::före eller ::efter att för detta eftersom de inte innehåller HTML-innehåll i dem.

<div class=”grid-wrapper”>
<div class=”grid”>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

<div class=”grid-cell”>
<div class=”grid-cell-inre”></div>
</div>

</div>
</div>
Steg 2: Flex det

Nu måste vi göra varje ruta i rutnätet en flex behållare. Detta gör att den inre delen av nätet för cellen att ta upp hela höjden av sin förälder. Vi kommer även behöva ställa in den inre element till en bredd av 100%. Detta säkerställer att det kommer att ta upp den fulla omfattningen av sin förälder, både horisontellt och vertikalt:

.grid-cell {
/* Inre krafter för att ta upp hela nätet cellens höjd */
display: flex;
}

.grid-cell-inre {
/* Inre krafter för att ta upp hela nätet cellens bredd */
width: 100%;
}

Låt oss se vad vi får om vi försöker lägga box skuggor för att de inre delarna:

.grid-cell-inre {
box-shadow: 0 0 10px 3px blå;
}

Box skuggor visas runt rutorna men blir avskurna

Det är mycket trevligare, men det är fortfarande inte riktigt där ännu. Den dolda spill som vi använder för att förhindra Chrome bugg är att komma i väg.

Steg 3: Hacky utfyllnad

Så, vi måste tillåta overflow men ändå undvika detta Chrome fel. Det enda säkra sättet jag har hittat för att göra detta är med som utfyllnad. Genom att lägga till 1px av utfyllnad till toppen och botten av det yttre nätet omslag element, det kommer att fixa Chrome fel.

.grid-wrapper {
/* Förhindrar udda marginal beteende i Krom */
cellutfyllnad: 1px 0;
}

Detta sker på bekostnad av att ha en extra 1px av utrymme i toppen och botten av nätet. Bilden nedan visar hur detta slutar se. Skuggorna har blivit ljusare för att visa 1px klyftan mer tydligt.

1px av utfyllnad på toppen och botten av nätet

Obs: Du kan undvika 1px av högsta utfyllnad genom att välja att inte ta upp utfyllnad gap värdet på nätet element. 1px botten av stoppning kan inte undvikas men.

En kantlinje tillämpas på det yttre nätet wrapper kommer också att arbeta, så tekniskt som jag inte behöver tillämpa utfyllnad till exempel ovan. De flesta av tiden, om vi tillämpar en skugga till rutorna, då har vi förmodligen inte vill se en gräns virad runt dem. Ovanstående exempel var mer att visa hur liten utfyllnad.

Detta är vad nätet ser ut utan den yttre gränsen:

3 x 2 shadow cell nätet
2 x 3 shadow cell nätet
1 x 6 skugga cell nätet

Här är en Penna som visar den slutliga produkten:

Se Pennan Falska rutnät med skuggor av Daniel Tonon (@daniel-tonon) på CodePen.

Rännan Nätet skuggor

Låt oss täcka hur du lägger till skuggor på Rännan rutorna. Du kan använda samma HTML-struktur som vi använde i föregående exempel.

Tillämpa nu detta SCSS att skapa en tre-kolumn rutnät som har en 20px rännstenen:

.grid {
@inkluderar grid(3, 20px, $inners: true);
}

Denna nya $inners: sanna egendom berättar Rännstenen Nätet att rutorna var och en har ett enda barn inslag som måste ta upp i full höjd och bredd för sin förälder ruta i rutnätet.

Istället för att använda overflow: hidden använder 1px i botten utfyllnad på omslaget element.

.grid-wrapper {
padding-bottom: 1px;
}

Rännan Nätet kommer inte ut en topp yttre marginal om det inte behöver. Detta hjälper till att undvika frågor kring Chrome negativ marginal fel. Trots allt, om det inte finns någon övre yttre marginal för att förneka med en felaktig negativ marginal, så det är inget fel att oroa sig för. Nedre yttre rännan är fortfarande ett problem, dock, och det är därför vi behöver 1px i botten utfyllnad. Detta 1px i botten utfyllnad tenderar att vara knappt märkbar (om alls), så oroa dig inte om det för mycket.

Nu, lägga till skuggor och du har själv en Rännstenen Rutnät med skugga celler!

.grid-cell-inre {
box-shadow: 0 0 10px 3px blå;
}

3 x 2 shadow cell nätet

Jag har bara skrapat på ytan av vad Rännstenen Nätet kan göra i denna artikel. Se till att läsa den fullständiga dokumentationen för att lära sig vad den klarar av.

Vi har kommit till slutet av vår IE nätet äventyr

Jag hoppas att du har haft denna razzia i världen av IE och CSS nätet. Se till att läsa igenom Del 1 och Del 2 om du inte redan har gjort det. Efter att ha läst alla tre artiklar, som du nu kommer att vara fullt utrustade för att göra några riktigt fantastiska layouter som ser lika bra ut i IE som de gör i moderna webbläsare.

Om du någonsin ser någon klagar över att inte kunna använda CSS-grid på grund av IE, du vet vad du ska göra. Lekfullt slå dem på huvudet för att det är så dumt och skicka dem här för att få sanningen.

Gå nu tillbaka, mina vänner, och bygga några nät! 😃🎉

Artikel-Serien:

  1. Avslöja Gemensamma IE Nätet Missuppfattningar
  2. CSS Nätet och den nya Autoprefixer
  3. Att fejka en automatisk placering rutnät med luckor (Detta Inlägg)