Grid

Eksempel1

Vi begynner med å lage et enkelt rutenett. Det vi lager her kan vi sikkert fikse med litt detaljer i et table-element, men vi åpner opp for en enklere og mer fleksibel løsning.

Vi setter opp en enkel tabell med tre kolonner og to rader med følgende HTML-kode.

<div class="wrapper11">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

og vi kopler til følgende stilsett:

.wrapper11 {
  display: grid;  
  max-width: 400px;
  /* flyter horisontalt midt på */
  margin: auto auto;
  /* Setter indirekte antall kolonner og rader*/
  grid-template-columns: 50px 200px auto;
  grid-template-rows:    50px 100px;  
  grid-gap: 10px;
  background-color: #FFFFFF;
  border:1px solid rgb(200,200,200);
  padding:5px
}
.wrapper11 > div {
  border: 2px solid rgb(203,122,15);
  border-radius: 4px;
  background-color: rgb(248,225,195,0.5);
  padding: 10px;
  color: black;
  text-align:center; 
}

Eksempel 2

En tilbakvendende oppgave er å formulere headere og footere på en grei og fleksibel måte. Dette lar seg løse med flex, men grid er et alternativ. Vi lager følgende HTML-kode:

<div class="wrapper12">
  <div><img src="menu.png"/></div>
  <div class="tittel">TITTEL</div>
  <div><img src="bs8.png"/></div>
  <div><img src="logo.gif"/></div>
</div>

TITTEL

og vi kopler til følgende stilsett:

.wrapper12 {
  display: grid;  
  min-width: 300px;
  grid-template-columns: 50px auto 50px 50px;
  grid-gap: 2px;
  border:1px solid rgb(200,200,200);
  padding:5px
}
.wrapper12 > div {
  padding: 0px;
  color: black;
  text-align:center; 
}
.wrapper12  img{height:40px}
.tittel{font-size:32px}