CSS GRID INTRODUKSJON

Laget av Camilla Larsen

Agenda

1

Flexbox spørsmå?

2

Grid

  • Hva er grid

  • Hvorfor bruker vi grid?

  • Hvordan bruker vi grid?

3

Oppgave

Spørsmål om flexbox?

Hva mener vi når vi prater om grid?

Vi kan gjøre veldig mye nyttig i Grid løsningen, men vi skal kun fokusere på det grunnleggende

.grid-container{
	/* Vi forteller at vi skal 
    bruke grid systemet */
    display: grid;
    
	/* Mellmrommet rundt 
    boksene skal være 30px */
    grid-gap: 30px;
    
	/* Innholdet deles inn i 3 columns, 
    og vi bestemmer
    hvor mye plass hver column skal ta*/
    grid-template-columns: 2fr 1fr 3fr;
    
	/* Vi setter høyden på row 1 og 2 */
    grid-template-rows: 100px 200px;
}

Column 1

Column 2

Column 3

Row 1

Row 2

<main class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</main>

Margin vs grid-gap

Nå ønsker vi å flytte rundt på boksene våre

Grid-column-start og grid-row-start

.grid-container{
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
}

/* Vi velger det siste childet i lista*/
.box6{
	/* Vi vil ha boksen i column 2*/
    grid-column: 2;
    /* Vi vil ha boksen i den første raden*/
    grid-row: 1;
}
<main class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item box6">6</div>
</main>

Oppgave: Forsøk å få dette resultatet, vi ser på løsningen sammen etter lunsj pausen.

Oppgave

Lag en ny nettside for sandefjord dyrepark.
Nettsiden trenger en forside og om oss side.

 

Benytt flexbox og grid til å sette opp den nye layouten til siden.

CSS grid

By Camilla Larsen

CSS grid

  • 243

More from Camilla Larsen