Containers

Containers har funnits i olika former på webben i evigheter, men deras funktion och användning har varierat över tid. När jag tittade tillbaka på en webbsida jag kodade 1999, så var innehållet i en container. Den containern var förvisso en <div> med align="center" som innehöll ett <center>-element som i sin tur innehöll ett table med width="800px", men det tjänade samma syfte. Tack och lov har mycket förändrats sedan dess!

Syftet med en container, eller med en .container-klass är att kunna justera och placera innehåll på en webbplats. Innehållet ska med fördel då även anpassa sig efter skärmens storlek (ett måste idag).

Om vi öppnar utvecklar-verktygen och aktiverar grid-linjer så ser vi dels de linjer som sidans innehåll anpassar sig efter. Vi kan även se måtten för padding och margin för det valda elementet (finns under computed).

Ord och begrepp

Ord är viktiga och ibland kallas även containers på webben för wrappers. Det är inte riktigt samma sak, men de används ibland synonymt. En container är en behållare för innehåll, medan en wrapper omsluter innehållet. Det är upp till dig att välja den semantik som passar ditt arbete bäst

Exempel

Jag har skapat några exempel på CodePen för att illustrera olika containers. Jag har använt dem i olika projekt, och de har tjänat mig väl. .container-klassens utveckling har följt med nya möjligheter i CSS och blir bara bättre och bättre.

Här är ett exempel på en uppdaterad container från SmolCSS.dev, den känns igen från min länkade codepen ovan.

Den här sidan, just nu

I den nuvarande iterationen av den här webbplatsen, 2024, valde jag att testa en ny teknik för att skapa containers. Tidigare har jag experimenterat med olika metoder för att återskapa bleed-effekter på sidan. Bleed kommer från tryckvärlden och innebär att innehållet går ut över sidans kanter. Dessa layouteffekter var jag inte nöjd med och tyckte inte att de fungerade bra.

Så det du nu ser är ett helt annat sätt att skapa containers och det är med namngivna grid-areas.

Inspiration

Koden och inspirationen till detta kommer från en video av Kevin Powell där han visar ett alternativ till den klassiska container. Det gjorde mig nyfiken att testa.

Ursprunget till detta kommer från Ryan Mulligan och här kan du läsa hans artikel om Layout breakouts with css grid.

Vad ska du använda

Det beror på dina behov. I mitt fall önskade jag extra kontroll, men insåg att jag var fast i en struktur skapad utifrån en klassisk container-klass. För att få till funktionen fick jag skriva om en hel del HTML och tänka om. Resultatet är inte riktigt där ännu, men det är som alltid en work in progress.

Avslutning

Som vanligt leder upptäckten av ny teknik till en redesigna av den här webbplatsen… Verkar rimligt, kan till och med vara sidans egentliga syfte.