Använd blocket Rutnätslayout för att justera innehållet på din webbplats. Med det här blocket kan du definiera responsiva brytpunkter, vilket innebär att du kan välja hur många kolumner som visas i bredd i ditt inlägg eller på din sida på både datorer och mobiler.
I denna guide
En rutnätslayout ger struktur för innehållet på en webbsida och justerar det. Den innehåller ett antal vertikala linjer som bestäms av visningsenheten (den responsiva brytpunkten):
- 12 rutnätslinjer för stationära enheter.
- 8 rutnätslinjer för surfplattor.
- 4 rutnätslinjer för mobila enheter.
I blocket Rutnätslayout grupperas rutnätslinjer tillsammans för att bilda kolumner (1–4) och du kan placera innehåll i var och en av dessa kolumner.
![Bild av blocket Rutnätslayout](https://en-support.files.wordpress.com/2019/11/layout-grid-block.png)
På mindre enheter är det vanligt att en layout för en dator sträcker sig över flera rader. Detta aktiveras automatiskt när du växlar till visning med surfplatta eller mobil, men du kan åsidosätta det genom att ändra rutnätsvärdena direkt.
Responsiva brytpunkter är ett avancerat ämne. Du kan fortfarande använda blocket Rutnätslayout utan att bekymra dig om dessa. Rutnätet använder då standardbrytpunkterna.
För att lägga till blocket Rutnätslayout klickar du på blockinfogarikonen + och söker efter ”rutnätslayout”. Klicka på det för att lägga till blocket i ett inlägg eller på en sida.
💡
Du kan också använda ditt tangentbord för att skriva
/layout
på en ny rad och trycka på returtangenten för att snabbt lägga till blocket Rutnätslayout.
![Lägga till blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/add-layout-grid-block.gif?w=690)
Om du har en webbplats med tillägg aktiverade, se till att aktivera tillägget Rutnätslayout via Tillägg → Installerade tillägg.
Du hittar detaljerade instruktioner om hur du lägger till block här.
Första gången du lägger till blocket Rutnätslayout uppmanas du att välja antalet kolumner:
![Välja hur många kolumner som ska användas i blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/choose-layout.png?w=896)
Du kan ändra detta senare i Blockinställningar.
Varje kolumn i rutnätet kan innehålla andra block. Klicka på Blockinfogarikonen + för varje kolumn och sök sedan efter blocket du vill lägga till.
![Använda Blockinfogarikonen + för att lägga till block i enskilda kolumner i blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/add-blocks-to-the-layout-grid.png?w=1024)
När du klickar på blocket visas ett verktygsfält med alternativ:
![Alternativ för verktygsfältet för blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-block-toolbar.png?w=564)
Blocket Rutnätslayout har följande alternativ i sitt verktygsfält:
- Ändra blocktyp eller -stil.
- Dra blocket.
- Flytta blocket uppåt eller nedåt.
- Ändra blockets horisontella justering eller bredd.
- Responsiva brytpunkter för dator, surfplatta och mobil.
- Ändra blockets vertikala justering.
- Ytterligare alternativ.
När du klickar på blocket kommer du att hitta ytterligare blockinställningar i den högra sidopanelen. Om du inte ser sidopanelen kan du behöva klicka på ikonen ⚙️ (kugghjulet) längst upp till höger för att öppna inställningarna.
![Blockinställningarna finns i den högra sidopanelen.](https://en-support.files.wordpress.com/2021/07/block-settings.png?w=399)
Utseende
Använd det här för att ändra antalet kolumner i blocket Rutnätslayout. Om du minskar antalet kolumner med en tas den sista kolumnen (och allt innehåll i den) bort.
Responsiva brytpunkter
Anpassa vyerna för dator, surfplatta och mobil genom att klicka på motsvarande knappar.
Förskjutning
Det avgör hur många rutnätslinjer som en kolumn hoppar över för att lägga till avstånd från föregående kolumn eller från början av rutnätslayouten.
Span
Det här är det totala antalet rutnätslinjer som utgör en enda kolumns hela bredd.
Rutnätets fästmarginal är utrymmet mellan två kolumner i rutnätet.
Om du väljer Ingen fästmarginal tas alla fästmarginaler bort, inklusive den första och sista.
När fästmarginalens storlek har något annat värde än Ingen fästmarginal kan du inaktivera knappen Lägg till ändfästmarginaler. Detta tar bort fästmarginalerna längst till vänster och höger i rutnätet så att det fyller hela sidans bredd.
![Sidofältsinställningar för blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-block-settings.png?w=305)
Avancerat
Via fliken Avancerat kan du lägga till en CSS-klass till ditt block, så att du kan skriva anpassad CSS och utforma blocket som du tycker passar.
![I avsnittet Avancerat kan du lägga till en CSS-klass till ditt block.](https://en-support.files.wordpress.com/2018/12/image3.png)
Varje kolumn i blocket Rutnätslayout har egna inställningar där du kan ändra bakgrundsfärg och utfyllnad. Detta påverkar bara den enskilda kolumnen som markerats.
![Redigera alternativen för utfyllnad och bakgrundsfärg för enskilda kolumner i blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-column-settings.gif?w=690)
Som regel kan du ändra storlek på kolumnerna i rutnätslayouten. Summan av alla värden för Förskjutning och Span för varje kolumn inom en rad får dock inte överstiga det totala antalet tillgängliga rutnätslinjer för visningsenheten.
På en stationär enhet (12 rutnätslinjer) kan individuella kolumner med en trekolumnslayout till exempel sträcka sig över 4 rutnätslinjer utan förskjutningar eller över 3 rutnätslinjer med 1 förskjutning för vardera kolumn, eller så kan en kolumn sträcka sig över 10 rutnätslinjer och de andra två kolumnerna över 1 rutnätslinje vardera.
Det säkerställer att dina kolumner inte överlappas och kan ibland innebära att du inte kan öka ett förskjutnings- eller spanvärde på ett ställe utan att först minska ett annat.
För varje kolumn i ditt rutnät finns ett färgat alternativ på sidorna. Dessa cirklar är draghandtag och om du klickar på dem och drar åt vänster eller höger ändras storleken på blocket.
![Dra i handtagen för att ändra storlek på kolumner i blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-drag-handles.png?w=1024)
Du kan också ändra storlek på kolumner i en rutnätslayout genom att ändra värdena för Förskjutning och Span direkt i blockinställningarna i sidopanelen.
![Responsiva brytpunkter för blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/desktop-offset-and-span-values.png?w=436)
Dessa justeras automatiskt när du använder draghandtagen.
När du vill ändra rutnätets storlek och justera hur kolumner visas på mobila enheter och surfplattor ska du tänka på att summan av alla förskjutnings- och spanvärden för de enskilda kolumnerna inte får överstiga 8 rutnätslinjer för surfplattor och 4 rutnätslinjer för mobila enheter.
I exemplen nedan ställer vi in kolumnerna så att spanvärdet är 2 och förskjutningsvärdet är 0 för att visa 2 kolumner på mobiler respektive 4 kolumner på surfplattor.
![Så här visar du två kolumner på mobiler med blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-two-columns-mobile.png?w=1024)
![Så här visar du fyra kolumner på surfplattor med blocket Rutnätslayout.](https://en-support.files.wordpress.com/2022/05/layout-grid-four-columns-tablet.png?w=1024)