För att testa koden i detta exempel rekommenderar jag att du använder dig av https://codepen.io (mata in addressen i din webbläsare och skapa en ny pen). Där kan du sedan följa guiden nedanför och mata in HTML i ena fönstret och CSS3 i det andra fönstret, detta så att du kan börja göra din grid.

Vad är då en grid kanske du undrar? En GRID är ett ord för ett rutsystem. När vi lägger upp text, bilder och annan information på nätet så utgår vi från att man placerar dessa så att de på något vis ligger i linje med varandra. Rutsystemet fungerar som gränser för var något slutar och något annat börjar. Jämför exempelvis med spalter i en tidning.

En grid gör vi enkelt genom att skapa en ”rad” och ett antal kolumner (exempelvis tre). Raden kan antingen täcka hela sidan (då har den exempelvis en bredd på 100vw – där vw är ett mått som innebär 100% av bredden på fönstret som är öppet. VW står för view width. Men vi kan lika gärna säga att raden har en mer exakt bredd, då anger vi bredden exakt i pixlar. Se exemplen nedan:

<div class="rad">
<div class="kolumn ett"> </div>
<div class="kolumn tva"> </div>
<div class="kolumn tre"> </div>
</div>
<div class="clearfix"></div>

Observera att oberoende av huruvida vi jobbar med vw eller pixlar så ser koden i HTML likadan ut. Det som skiljer sig när man definierar bredden på vår grid är vår CSS.

.rad {
    width: 100vw;
}
.kolumn {
    width: 33vw;
}

I exemplet ovan så definierar vi bredden av raden som lika bred som användarens skärm (100vw) och bredden på varje kolumn (spalt) som en tredjedel av användarens skärm. Notera att utan en container (rad) för kolumnerna som är definierad som 100vw så kommer spalterna inte att hållas samman. Observera även att med koden ovanför så kommer inte spalterna att ligga sida vid sida. För att göra det så måste vi använda oss av något som kallas för float. Float använder vi oss av när vi vill placera olika saker bredvid varandra. Vill vi att de ska hamna till vänster på skärmen, och varje spalt bredvid varandra, så använder vi oss av ”float: left”, vill vi att de ska hamna till höger i bild, och bredvid varandra så använder vi oss av ”float: right”. Vill vi avbryta en float (så att innehållet inte fortsätter att förhålla sig så att det hamnar bredvid varandra, så måste vi använda oss av något som kallas för en ”clearfix”, som ser ut såhär: ”clear: both”.

.rad {
   width: 100vw;
}
.kolumn {
   width: 33vw;
   float: left;
}
.clearfix {
   clear: both;
}

Nu har du tre spalter som ligger bredvid varandra. Men de har inget innehåll, så därför ”händer” ingenting. Använd dig därför av https://sv.lipsum.com/ för att fylla dina spalter med innehåll. Klistra in innehållet inom kolumnerna:

<div class="rad">
<div class="kolumn ett">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit leo vitae ante congue, sed finibus massa placerat. Sed suscipit consequat urna, sed luctus felis. Donec posuere orci quam, mattis tristique tellus vestibulum non. Phasellus venenatis condimentum sem sed euismod. Quisque tempor, sapien id rutrum gravida, ligula tellus luctus felis, quis dictum nisi dui a mauris. Nam quis elit a dolor rutrum efficitur ac eget urna. Nullam vitae turpis eget ipsum sagittis porta eget a libero. Etiam pellentesque bibendum justo, eu bibendum felis condimentum eget. Aliquam ut nibh pulvinar, condimentum turpis eget, tempus nibh. Integer non lorem eget velit convallis sodales. Nulla blandit pretium ante, vitae pulvinar quam. Integer sapien eros, hendrerit egestas vehicula molestie, dictum ut risus. Sed sem ante, scelerisque sed bibendum sit amet, facilisis a velit. Sed vitae volutpat massa.  </div>
<div class="kolumn tva">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit leo vitae ante congue, sed finibus massa placerat. Sed suscipit consequat urna, sed luctus felis. Donec posuere orci quam, mattis tristique tellus vestibulum non. Phasellus venenatis condimentum sem sed euismod. Quisque tempor, sapien id rutrum gravida, ligula tellus luctus felis, quis dictum nisi dui a mauris. Nam quis elit a dolor rutrum efficitur ac eget urna. Nullam vitae turpis eget ipsum sagittis porta eget a libero. Etiam pellentesque bibendum justo, eu bibendum felis condimentum eget. Aliquam ut nibh pulvinar, condimentum turpis eget, tempus nibh. Integer non lorem eget velit convallis sodales. Nulla blandit pretium ante, vitae pulvinar quam. Integer sapien eros, hendrerit egestas vehicula molestie, dictum ut risus. Sed sem ante, scelerisque sed bibendum sit amet, facilisis a velit. Sed vitae volutpat massa.  </div>
<div class="kolumn tre"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit leo vitae ante congue, sed finibus massa placerat. Sed suscipit consequat urna, sed luctus felis. Donec posuere orci quam, mattis tristique tellus vestibulum non. Phasellus venenatis condimentum sem sed euismod. Quisque tempor, sapien id rutrum gravida, ligula tellus luctus felis, quis dictum nisi dui a mauris. Nam quis elit a dolor rutrum efficitur ac eget urna. Nullam vitae turpis eget ipsum sagittis porta eget a libero. Etiam pellentesque bibendum justo, eu bibendum felis condimentum eget. Aliquam ut nibh pulvinar, condimentum turpis eget, tempus nibh. Integer non lorem eget velit convallis sodales. Nulla blandit pretium ante, vitae pulvinar quam. Integer sapien eros, hendrerit egestas vehicula molestie, dictum ut risus. Sed sem ante, scelerisque sed bibendum sit amet, facilisis a velit. Sed vitae volutpat massa. </div>
</div>
<div class="clearfix"></div>

Nu bör du ha fått fram tre stycken spalter med text bredvid varandra (om du har gjort rätt, det vill säga). Men de glider ihop på sidan vilket gör att det ser lite rörigt ut. Vi behöver skapa lite mellanrum mellan spalterna. För att göra det så använder vi oss utav något som kallas för padding. Det gör att det skapas ett visst tomrum runtomkring spalterna. Hur stort tomrummet är kan vi definiera, exempelvis med pixlar eller procent. I vårt exempel så använder vi oss av pixlar, padding: 20px.

Published
Categories webbutveckling
Views 7

Comments

No Comments

Leave a Reply

Senaste kommentarer

    Recent Posts

    Grunden i HTML5

    Vad lär man sig som ny elev?

    Twitter

    Skylith — #gutenberg WordPress Theme with pre-made Templates. See it in action - youtu.be/VCD6mv10lOM
    Skylith - Multipurpose HTML Template now on 20% cheaper on #themeforest themeforest.net/item/skylith-v…