Utforska CSS Grids implicita rutnät och automatiska placeringskrafter

När du arbetar med CSS Grid är det första du ska göra att ställa in display: grid på det element som vi vill ska bli en gridcontainer. Sedan definierar vi rutnätet explicit med en kombination av grid-template-columns, grid-template-rowsoch grid-template-areas. Och därifrån är nästa steg att placera föremål inuti rutnätet.

Detta är det klassiska tillvägagångssättet som bör användas och jag rekommenderar det också. Det finns dock ett annat tillvägagångssätt för att skapa rutnät utan någon uttrycklig definition. Vi kallar detta för implicit rutnät.

"Explicit, implicit? Vad fan är det som händer här?"

Konstiga termer, eller hur? Manuel Matuzovic redan har en bra förklaring av vad vi kan av "implicit" och "explicit" i CSS Grid, men låt oss gräva rakt in i vad d specification säger:

Smakämnen grid-template-rows, grid-template-columnsoch grid-template-areas egenskaper definierar ett fast antal spår som bildas det explicita rutnätet. När rutnätsobjekt är placerade utanför dessa gränser, genererar rutnätsbehållaren implicita rutnätsspår genom att lägga till implicita rutnätslinjer till rutnätet. Dessa linjer bildar tillsammans med det explicita rutnätet det implicita rutnätet.

Så, på vanlig engelska, genererar webbläsaren automatiskt extra rader och kolumner om några element råkar placeras utanför det definierade rutnätet.

Hur är det med automatisk placering?

I likhet med begreppet implicit rutnät, automatisk placering är webbläsarens förmåga att automatiskt placera objekten i rutnätet. Vi behöver inte alltid ange positionen för varje föremål.

Genom olika användningsfall kommer vi att se hur sådana funktioner kan hjälpa oss att skapa komplexa och dynamiska rutnät med några rader kod.

Dynamisk sidofält

Här har vi tre olika layouter men vi har bara en rutnätskonfiguration som fungerar för dem alla.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Endast en kolumn tar upp allt ledigt utrymme. Detta är vårt "explicita" rutnät. Den är inställd för att passa ett rutnätsobjekt i main gallerbehållare. Det är allt. En kolumn och en rad:

Men tänk om vi bestämde oss för att släppa ett annat element där, säg en aside (vår dynamiska sidofält). Som det är för närvarande (och explicit) definierat, måste vårt rutnät justeras automatiskt för att hitta en plats för det elementet. Och om vi inte gör något annat med vår CSS, det här är vad DevTools säger till oss som händer.

Vi kan flytta <aside> till en kolumn bredvid <section>:

aside {
  grid-column-start: 2;
}

Och här är vad DevTools berättar för oss nu:

Vi placerar vårt element i den andra kolumnen men... vi har inte en andra kolumn. Konstigt, eller hur? Vi deklarerade aldrig en andra kolumn på <main> rutnätsbehållare, men webbläsaren skapade en åt oss! Detta är nyckeldelen från specifikationen vi tittade på:

När rutnätsobjekt är placerade utanför dessa gränser, genererar rutnätsbehållaren implicita rutnätsspår genom att lägga till implicita rutnätslinjer till rutnätet.

Denna kraftfulla funktion gör att vi kan ha dynamiska layouter. Om vi ​​bara har <section> element, allt vi får är en kolumn. Men om vi lägger till en <aside> element till blandningen skapas en extra kolumn för att innehålla den.

Vi skulle kunna placera <aside> före <section> istället så här:

aside {
  grid-column-end: -2;
} 

Detta skapar den implicita kolumnen i början av rutnätet, till skillnad från föregående kod som placerar den implicita kolumnen i slutet.

Vi kan göra samma sak lättare med hjälp av grid-auto-flow egenskap för att ställa in alla implicita spår att flyta i en column riktning:

Nu behöver du inte specificera grid-column-start att placera <aside> element till höger om <section>! Faktum är att alla andra rutnätsobjekt som vi bestämmer oss för att lägga in där när som helst kommer nu att flyta i en kolumnriktning, var och en placerad i sina egna implicita rutnätsspår. Perfekt för situationer där antalet objekt i rutnätet inte är känt i förväg!

Som sagt, vi behöver fortfarande grid-column-end om vi vill placera den i en kolumn till vänster om den eftersom annars <aside> kommer att uppta den explicita kolumnen som i sin tur trycker på <section> utanför det explicita rutnätet och tvingar det att ta den implicita kolumnen.

Jag vet jag vet. Det är lite invecklat. Här är ett annat exempel som vi kan använda för att bättre förstå denna lilla egenhet:

I det första exemplet angav vi ingen placering. I det här fallet kommer webbläsaren att placera först <aside> element i den explicita kolumnen eftersom det kommer först i DOM. De <section>, under tiden, placeras automatiskt i rutnätskolumnen som webbläsaren automatiskt (eller implicit) skapar åt oss.

I det andra exemplet ställer vi in <aside> element utanför det explicita rutnätet:

aside {
  grid-column-end: -2;
}

Nu spelar det ingen roll <aside> kommer först i HTML. Genom att omfördela <aside> någon annanstans har vi gjort <section> element tillgängligt för att ta den explicita kolumnen.

Bildrutnät

Låt oss prova något annat med ett rutnät med bilder där vi har en stor bild och några miniatyrer bredvid den (eller under den).

Vi har två rutnätskonfigurationer. Men gissa vad? Jag definierar inte något rutnät alls! Allt jag gör är detta:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Det är förvånande att vi bara behöver en rad kod för att få till något sådant här, så låt oss analysera vad som händer och du kommer att se att det är enklare än du kanske tror. För det första, grid-area är en stenografiegenskap som kombinerar följande egenskaper till en enda deklaration:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Vänta! är det inte grid-area egenskapen vi använder för att definiera namngivna områden istället för var element börjar och slutar på rutnätet?

Ja, men det gör också mer. Vi skulle kunna skriva mycket mer om grid-area, men i det här specifika fallet:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Vi kan se samma sak när vi öppnar DevTools för att utöka förkortningsversionen:

Detta innebär att det första bildelementet i rutnätet måste sträcka sig tre kolumner och tre rader. Men eftersom vi inte definierade några kolumner eller rader, gör webbläsaren det åt oss.

Vi har i princip placerat den första bilden i HTML-koden för att ta upp ett 3⨉3-rutnät. Det betyder att alla andra bilder kommer att placeras automatiskt i samma tre kolumner utan att behöva ange något nytt.

För att sammanfatta sa vi till webbläsaren att den första bilden måste ta upp tre kolumner och tre rader som vi aldrig uttryckligen definierade när vi satte upp rutnätsbehållaren. Webbläsaren ställer in dessa kolumner och rader åt oss. Som ett resultat, de återstående bilderna i HTML flyter direkt på plats med samma tre kolumner och rader. Och eftersom den första bilden tar upp alla tre kolumnerna i den första raden flyter de återstående bilderna in i ytterligare rader som var och en innehåller tre kolumner, där varje bild tar upp en enda kolumn.

Allt detta från en rad CSS! Det är kraften i "implicita" rutnät och automatisk placering.

För den andra rutnätskonfigurationen i den demon, allt jag har gjort är att ändra den automatiska flödesriktningen med grid-auto-flow: column på samma sätt som vi gjorde tidigare när vi placerade en <aside> element bredvid a <section>. Detta tvingar webbläsaren att skapa en fjärde kolumn den kan använda för att placera de återstående bilderna. Och eftersom vi har tre rader placeras de återstående bilderna i samma vertikala kolumn.

Vi måste lägga till några egenskaper till bilderna för att se till att de passar bra inuti rutnätet utan översvämning:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Och naturligtvis kan vi enkelt uppdatera rutnätet för att överväga fler bilder genom att justera ett värde. Det skulle vara 3 i stilarna för den stora bilden. Vi har detta:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Men vi kan lägga till en fjärde kolumn helt enkelt genom att ändra den till 4 istället:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Ännu bättre: låt oss ställa in det som en anpassad egenskap för att göra saker ännu enklare att uppdatera.

Dynamiska layouter

Det första användningsfallet med sidofältet var vår första dynamiska layout. Nu kommer vi att ta itu med mer komplexa layouter där antalet element kommer att diktera rutnätskonfigurationen.

I det här exemplet kan vi ha allt från ett till fyra element där rutnätet justeras på ett sätt som fint passar antalet element utan att lämna några besvärliga luckor eller saknade utrymmen.

När vi har ett element gör vi ingenting. Elementet sträcker sig för att fylla den enda raden och kolumnen som automatiskt skapas av rutnätet.

Bit när vi lägger till det andra elementet skapar vi en annan (implicit) kolumn med hjälp av grid-column-start: 2.

När vi lägger till ett tredje element bör det ta upp bredden på två kolumner - det är därför vi använde grid-column-start: span 2, men bara om det är :last-child för om (och när) vi lägger till ett fjärde element, bör det bara ta upp en enda kolumn.

Lägger vi ihop det har vi fyra rutnätskonfigurationer med bara två förklaringar och det implicita rutnätets magi:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Låt oss prova en annan:

Vi gör ingenting för det första och andra fallet där vi bara har ett eller två element. När vi lägger till ett tredje element säger vi dock till webbläsaren att - så länge det är :last-child — den ska sträcka sig över två kolumner. När vi lägger till ett fjärde element berättar vi för webbläsaren att elementet måste placeras i den andra kolumnen.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Börjar du fatta tricket? Vi ger webbläsaren specifika instruktioner baserat på antalet element (med :nth-child) och ibland kan en instruktion ändra layouten helt.

Det bör noteras att storleken inte blir densamma när vi arbetar med olika innehåll:

Eftersom vi inte definierade några storlekar för våra föremål, anpassar webbläsaren dem automatiskt för oss baserat på deras innehåll och vi kan sluta med en annan storlek än vad vi just såg. För att övervinna detta måste vi uttryckligen ange att alla kolumner och rader är lika stora:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hej, vi har inte lekt med de fastigheterna än! grid-auto-rows och grid-auto-columns ställ in storleken på implicita rader respektive kolumner i en rutnätsbehållare. Eller som specifikationen förklarar det:

Smakämnen grid-auto-columns och grid-auto-rows egenskaper anger storleken på spår som inte har tilldelats en storlek av grid-template-rows or grid-template-columns.

Här är ett annat exempel där vi kan gå upp till sex element. Den här gången låter jag dig dissekera koden. Oroa dig inte, väljarna kan se komplicerade ut men logiken är ganska okomplicerad.

Även med sex element behövde vi bara två deklarationer. Föreställ dig alla komplexa och dynamiska layouter vi kan åstadkomma med några rader kod!

Vad händer med det grid-auto-rows och varför tar det tre värden? Definierar vi tre rader?

Nej, vi definierar inte tre rader. Men vi är definiera tre värden som ett mönster för våra implicita rader. Logiken är som följer:

• Om vi ​​har en rad, kommer den att få storlek med det första värdet.
• Om vi ​​har två rader får den första det första värdet och den andra det andra värdet.
• Om vi ​​har tre rader kommer de tre värdena att användas.
• Om vi ​​har fyra rader (och här kommer den intressanta delen) använder vi de tre värdena för de tre första raderna och vi återanvänder det första värdet igen för den fjärde raden. Det är därför det är ett slags mönster som vi upprepar för att storleken på alla implicita rader.
• Om vi ​​har 100 rader kommer de att vara tre gånger tre att ha i storlek 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frEtc.

Till skillnad från grid-template-rows som definierar antalet rader och deras storlekar, grid-auto-rows endast storlekar rad som kan skapas längs vägen.

Om vi ​​kommer tillbaka till vårt exempel är logiken att ha samma storlek när två rader skapas (vi kommer att använda 2fr 2fr), men om en tredje rad skapas gör vi den lite mindre.

Rutnätmönster

För den här sista kommer vi att prata om mönster. Du har förmodligen sett de där två kolumnlayouterna där en kolumn är bredare än den andra, och varje rad växlar placeringen av dessa kolumner.

Den här sortens layout kan vara svår för att få till stånd utan att veta exakt hur mycket innehåll vi har att göra med, men CSS Grids implicita automatiska placeringskrafter gör det till en relativ enkelhet.

Ta en titt på koden. Det kan se komplicerat ut men låt oss bryta ner det eftersom det blir ganska okomplicerat.

Det första du ska göra är att identifiera mönstret. Fråga dig själv: "Efter hur många element ska mönstret upprepas?" I det här fallet är det efter vart fjärde element. Så låt oss titta på att bara använda fyra element för tillfället:

Låt oss nu definiera rutnätet och ställa in det allmänna mönstret med hjälp av :nth-child väljare för att växla mellan element:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Vi sa att vårt mönster upprepas vart fjärde element, så vi kommer logiskt att använda 4n + x var x varierar från 1 till 4. Det är lite lättare att förklara mönstret så här:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfekt, eller hur? Vi har fyra element, och upprepar mönstret på det femte elementet, det nionde elementet och så vidare.

De :nth-child väljare kan vara knepigt! Chris har en super hjälpsam förklaring av hur det hela fungerar, Inklusive recept för att skapa olika mönster.

Nu konfigurerar vi varje element så att:

1. Det första elementet måste ta två kolumner och börja vid kolumn ett (grid-column: 1/span 2).
2. Det andra elementet placeras i den tredje kolumnen (grid-column-start: 3).
3. Det tredje elementet placeras i den första kolumnen: (grid-column-start: 1).
4. Det fjärde elementet tar två kolumner och börjar vid den andra kolumnen: (grid-column: 2/span 2).

Här är det i CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Vi kunde stanna här och vara klara... men vi kan göra bättre! Närmare bestämt kan vi ta bort vissa deklarationer och lita på grid:s automatiska placeringsbefogenheter för att göra jobbet åt oss. Detta är den svåraste delen att groka och kräver mycket träning för att kunna identifiera vad som kan tas bort.

Det första vi kan göra är att uppdatera grid-column: 1 /span 2 och endast använda grid-column: span 2 eftersom webbläsaren som standard placerar det första objektet i den första kolumnen. Vi kan också ta bort detta:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Genom att placera det första, andra och fjärde objektet placerar rutnätet automatiskt det tredje objektet på rätt plats. Det betyder att vi står kvar med detta:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Men kom igen vi kan promenera gör bättre! Vi kan också ta bort detta:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Varför? Om vi ​​placerar det fjärde elementet i den andra kolumnen samtidigt som vi låter det ta upp två hela kolumner, tvingar vi rutnätet att skapa en tredje implicit kolumn, vilket ger oss totalt tre kolumner utan att uttryckligen säga till det. Det fjärde elementet kan inte gå in i den första raden eftersom det första objektet också tar två kolumner, så det flyter till nästa rad. Denna konfiguration lämnar oss med en tom kolumn i den första raden och en tom i den andra raden.

Jag tror att du vet slutet på historien. Webbläsaren kommer automatiskt att placera det andra och tredje objektet på dessa tomma platser. Så vår kod blir ännu enklare:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Allt som krävs är fem deklarationer för att skapa ett väldigt coolt och väldigt flexibelt mönster. Optimeringsdelen kan vara knepig, men du vänjer dig och får några knep med övning.

Varför inte använda grid-template-columns att definiera explicita kolumner eftersom vi vet antalet kolumner?

Vi kan göra det! Här är koden för det:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Som du kan se är koden definitivt mer intuitiv. Vi definierar tre explicita rutkolumner och vi berättar för webbläsaren att det första och det fjärde elementet måste ha två kolumner. Jag rekommenderar starkt detta tillvägagångssätt! Men målet med den här artikeln är att utforska nya idéer och knep som vi får från CSS Grids implicita och automatiska placeringsbefogenheter.

Det explicita tillvägagångssättet är mer rakt på sak, medan ett implicit rutnät kräver att du – ursäkta ordleken – fyller i luckorna där CSS gör ytterligare arbete bakom kulisserna. I slutändan tror jag att en gedigen förståelse för implicita rutnät kommer att hjälpa dig att bättre förstå CSS Grid-algoritmen. När allt kommer omkring är vi inte här för att studera det som är uppenbart - vi är här för att utforska vilda territorier!

Låt oss prova ett annat mönster, lite snabbare den här gången:

Vårt mönster upprepas vart sjätte element. Det tredje och fjärde elementet måste vardera ockupera två hela rader. Om vi ​​placerar det tredje och det fjärde elementet verkar det som att vi inte behöver röra de andra, så låt oss prova följande:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, inte bra. Vi måste placera det andra elementet i den första kolumnen. Annars kommer rutnätet automatiskt att placera det i den andra kolumnen.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Bättre, men det finns fortfarande mer arbete. Vi måste flytta det tredje elementet till toppen. Det är frestande att försöka placera den i första raden så här:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Men det här fungerar inte eftersom det tvingar alla 6n + 3 element för att placeras i samma område vilket gör en rörig layout. Den verkliga lösningen är att behålla den ursprungliga definitionen av det tredje elementet och lägga till grid-auto-flow: dense för att fylla luckorna. Från MDN:

[Den] "täta" packningsalgoritmen försöker fylla i hål tidigare i rutnätet, om mindre föremål kommer upp senare. Detta kan leda till att föremål visas ur funktion, då det skulle fylla i hål efter större föremål. Om den utelämnas, används en "gles" algoritm, där placeringsalgoritmen bara alltid rör sig "framåt" i rutnätet när objekt placeras, aldrig bakåt för att fylla hål. Detta säkerställer att alla automatiskt placerade föremål visas "i ordning", även om detta lämnar hål som kunde ha fyllts av senare föremål.

Jag vet att den här egenskapen inte är särskilt intuitiv men glöm den aldrig när du står inför ett placeringsproblem. Innan du provar olika konfigurationer förgäves, lägg till det eftersom det kan fixa din layout utan extra ansträngning.

Varför inte alltid lägga till den här egenskapen som standard?

Jag rekommenderar det inte eftersom vi i vissa fall inte vill ha det beteendet. Notera hur MDN:s förklaring där nämner att det får föremål att flöda "ur funktion" för att fylla hål efter större föremål. Visuell ordning är vanligtvis lika viktig som källordningen, särskilt när det kommer till tillgängliga gränssnitt och grid-auto-flow: dense kan ibland orsaka en obalans mellan den visuella ordningen och källordningen.

Vår sista kod är då:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

En till? Nu går vi!

För den här ska jag inte prata för mycket och istället visa dig en illustration av koden jag har använt. Försök att se om du förstår hur jag nådde den koden:

Objekten i svart är implicit placerade i rutnätet. Det bör noteras att vi kan få samma layout på fler sätt än hur jag kom dit. Kan du lista ut dem också? Vad sägs om att använda grid-template-columns? Dela dina verk i kommentarsfältet.

Jag ska lämna er med ett sista mönster:

Jag gör har en lösning för den här men det är din tur att öva. Ta allt vi har lärt oss och försök koda detta själv och jämför det sedan med min lösning. Oroa dig inte om du avslutar med något utförligt – det viktigaste är att hitta en fungerande lösning.

Vill ha mer?

Innan vi avslutar vill jag dela med mig av några Stack Overflow-frågor relaterade till CSS Grid där jag hoppade in med svar som använder många av de tekniker som vi behandlade här tillsammans. Det är en bra lista som visar hur många verkliga användningsfall och verkliga situationer som dyker upp där dessa saker är användbara:

Inslagning upp

CSS Grid har funnits i flera år, men det finns fortfarande många föga kända och använda knep som inte diskuteras brett. Funktionerna för implicit rutnät och automatisk placering är två av dem!

Och ja, det här kan bli utmanande! Det har tagit mig mycket tid att hitta logiken bakom implicita rutnät och jag kämpar fortfarande med automatisk placering. Om du vill lägga mer tid på att linda huvudet runt explicita och implicita rutnät, här är ett par ytterligare förklaringar och exempel värda att kolla in:

På samma sätt kanske du vill läsa om grid-auto-columns i CSS-Tricks-almanackan eftersom Mojtaba Seyedi går in i detalj och inkluderar otroligt användbara bilder för att förklara beteendet.

Som jag sa när vi började, metoderna vi täckte här är inte avsedda att ersätta de vanliga sätten du redan känner för att bygga nät. Jag utforskar helt enkelt olika sätt som kan vara till hjälp i vissa fall.