Grid

Hva

I denne modulen skal vi se litt nærmere på hvordan vi kan bruke grid til å realisere design av en webside. Ighen er det slik at vi kan får til det samme i flex og det er en vurdering av hva som er mest hensiktsmessig.

Se f.eks. beskrivelsen hos Mozilla Developer Network [1] .

Eksempel

Vi ønsker å lage en webside med følgende ganske vanlige layout. Vi vil ha en header med tittel og en logo og et bilde med en link. Videre vil vi ha en meny (nav) til venstre for innholdet (article). Under siden vi vi ha en footer, også denne med noen informasjonsblokker.

Vi formulerer dette med følgende struktur:

<div class="page">
	<header>  
		<div><img src="glass.png"/></div>
		<div class="tittel">Vinsmaking</div>
		<div><img src="logo.gif"/></div>
	</header>
	<main>
		<nav>
		<div>Velg1</div>
		<div>Velg2</div>
		<div>Velg3</div>
		</nav>				
		<article>
		<div>	teksten</div>
		</article>
	</main>	
	<footer>
		<div class="date">2019-01-07</div>
		<div><img src="bs8.png"/></div>
	</footer>
</div>

Vi kopler til et stilsett, se nedenfor, og får følgende side ( i en iframe):

Stilsettet er bygget opp slik at jeg bruker følgende gridstrukturer:

page. med en kolonne og kontroll med totalbredden
header. med en rad og kontroll med høyden
main. med en rad og kontroll med menybredden
footer. med en rad og kontroll med høyden

Dette kunne vært organisert på mange andre måter, men jeg har valgt denne fordi den gir meg best oversikt. Jeg kunne laget en tilsvarende flex-struktur og jeg kunne laget en mer helhetlig men samtidig mer komplisert gridstruktur. Stilsettet ble slik:

.page{
  display:grid;
  grid-template-rows:   50px auto auto;
  grid-template-columns: auto;
  min-width: 360px;
  width:98%;
  margin-right:10px
}
/* ----- header ---- */
header {
 display: grid;  
  width:100%;
  grid-template-columns: 50px auto 50px ;
  grid-template-rows:   50px;  
  grid-gap: 10px;
  border:1px solid rgb(200,200,200);
  padding:5px
}
header > div {
  padding: 0px;
  color: black;
  text-align:center; 
}
header  img{height:40px}
header .tittel{font-size:32px}
/* ----main (nav & article) ---- */
main {
  display: grid;  
  min-width: 400px;
  width:100%;
  grid-template-columns: 60px 1fr ;
  grid-template-rows:   auto;  
  grid-gap: 10px;
  border:1px solid rgb(200,200,200);
  padding:5px;
}
main nav{
    color:blue;
    border-right:solid 1px rgb(200,200,200);
    padding:2px;
    line-height:150%;    
}
main article{ }
/* ---- footer ---- */
footer {
  display: grid;  
  width:100%;
  grid-template-columns: auto 50px ;
  grid-template-rows:55px;  
  grid-gap: 10px;
  background-color: #FFFFFF;
  border:1px solid rgb(200,200,200);
  padding:5px;
}
footer > div {
  padding-top: 10px;
  color: black;
  text-align:center;  
}
footer  img{height:40px}

Du kan også inspisere denne strukturen på denne siden:
grid21.html https://borres.hiof.no/wep/css/grid/pagelayout/grid21.html

Referanser

CSS-grid MDN developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout 07-01-2019