Layout på webben har blivit enklare. Att skapa webbdesign med CSS Grid gör livet lite lättare när man bygger hemsidor. Dessutom har alla moderna webbläsare stöd för det, till och med internet explorer. På bilden här ovan så ser du hur rutnätet ser ut i Firefox Developer Tools. De streckade linjerna syns inte i slutändan och färgerna är bara där för att förtydliga. Lite längre fram i tiden så kommer jag att skriva en artikel om det, men inte just nu. Vilket du får förklaringen till längre ner på denna sida.

Kortfattat om CSS Grid

Kort sammanfattat så låter CSS grid dig skapa ett rutnät, ganska likt de som man använder i de stora ramverken. Den stora skillnaden är att med grid så behöver du inte lägga ett div-element inuti ett annat inuti ett annat inuti ett annat inuti ett annat. Ja, du fattar kanske. Har du knackat HTML någon gång så vet du precis vad jag pratar om. Dessutom behöver man inte göra några ”fulhack” för att få det att fungera. Man kommer inte undan helt och hållet, men ens HTML-kod blir mycket mer lättläst. Man ska inte heller bortse från andra tekniker, jag förespråkar hellre att blanda olika tekniker och välja rätt beroende på vad som faktiskt behövs. Flexbox är ypperligt att använda när du behöver göra något i enbart en dimension medan grid låter dig göra saker tvådimensionellt!

Rutnätet på bilden ovan skapas genom CSS-koden nedan. Det ser kanske ut som grekiska om man inte hållt på med det tidigare, men det är inte så komplicerat faktiskt. Du får vänta på min riktiga artikel om CSS Grid om du vill ha förklaringar! 😉

body {
	background-color: #e2e2e6;
	display: grid;
	grid-template-columns: [page-start] 1fr 16fr 1fr;
	grid-template-rows: 60px 200px minmax(200px, auto) minmax(400px, auto) minmax(300px, auto);
}
.top-menu-bar {
	background: #222;
	color: #fff;
	grid-column-start: 1;
	grid-column-end: 4;
}
#header {
	background-color: pink;
	border-bottom: 1px solid #666;
	border-top: 1px solid #fff;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 4;
}
#content {
	background-color: white;
	grid-column: 2 / 3;
	grid-row: 3 / 5 span;
}

#footer {
	background-color: #444;
	grid-column: 1 / 5;
	grid-row: 5 / 6;
}

I HTML-koden mellan BODY-taggarna så ser det ut så här, ganska mycket renare än du är van med skulle jag tro:

<nav class="top-menu-bar"></nav>

<header id="header"></header>
<main id="content">
	<article>
	</article>
</main>
<footer id="footer"></footer>

Nu är ju det här bara en digital skiss till ett av mina projekt, det krävs mer än ett rutnät för att bygga en snygg layout som fungerar och är användbar. HTML-koden är i alla fall så sjukt mycket enklare att hålla reda på och det var mest det jag vill visa! Stora ramverk med floats och flex för webbdesign och layout är passé, om de inte anpassar sig då förstås.

Pausat med webbdesign

Det här med att bygga hemsidor har stått i pausläge ett tag, ganska länge faktiskt. Försökte komma igång igen för några månader sen. Det gick väl lite si så där. Men nu har jag har bestämt mig för att göra det jag tycker är roligt och vill göra mer av, så klart i mån av tid (i det så ingår också fotograferingen). Det handlar mycket om ens egen inställning till saker och ting. Insikt tror jag det kallas när man kommer på det själv. Webbutveckling är en av sakerna jag tänker göra mer av. Dessutom så har jag tänkt att bli en lite flitigare bloggare, har ju med fotograferingen faktiskt lyckats med konststycket att publicera en bild om dagen på min Instagram sedan den första januari i år. Får jag ett jobb däremot, då blir det så klart mindre tid till dessa saker.

Gör du något kreativt?

Det är säkert fler än jag som använder sin lediga tid till mer kreativa och konstruktiva saker. Nu är ju jag lite av en nörd, så det blir en del tid framför datorn ändå. Skriv en kommentar nedan och berätta gärna om vad du gör på din lediga tid!? Vad tycker du om webbutveckling?