search icon

CSS Grid

CSS grid er CSS-regler til den moderne tids layout til web. Tidligere er der brugt tabeller, floats, position eller flexbox til layout. Flexbox er stadig relevant, men hvor flexbox er til 1-dimensionelle layouts kan grid bruges til at lave mere avancerede 2-dimensionelle layouts.

Der kan findes en mere uddybende beskrivelse af CSS grid på CSS Tricks

Grundlæggende CSS grid

Ligesom med flexbox bruges grid i et parent- / child-forhold, hvor man sætter display: grid (eller grid-inline) på parent element, definere grid’ets layout og så lægges child-elementer i det layout man har defineret i parent med mindre man yderligere specificere et layout for child-elementer.

Her er et eksempel. Læg mærke til, at .container har display: grid samt propertien grid-template-columns. Med grid-template-columns definere man de kolonner, der skal være i layoutet.

<!--html-->
<section class="container">
  <div>Hello World</div>
  <div></div>
  <div></div>
  <div></div>
</section>
/*--CSS--*/
.container {
  color: #fff;
  display: grid;
  grid-template-columns: 200px 50px 200px 200px;
  text-align: center;
}

Her ses et simpelt grid-layout. Kolonnerne har størrelse som defineret i CSS-koden ovenfor. Men havde der ikke været indhold i nogle af kolonnerne, så ville indholdet ikke have nogen højde og dermed ikke være synligt.

Simpelt CSS-grid-layout

Havde der været flere elementer end de 4, der er defineret kolonner til ville de overskydende elementer følge samme kolonne-layout. Men for, at de skulle være synlige skulle der være indhold i mindst et af elementerne i række nr. 2. Ellers ville de ikke være synlige.

I eksemplet her er der sat flere HTML-elementer ind, men CSS-koden er den samme

<!--html-->
<section class="container">
  <div>Hello World</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>How</div>
  <div>are</div>
  <div>you?</div>
</section>

Grid i 2 dimensioner

Med grid-template-rows er det muligt også at definere, hvordan rækker skal se ud med CSS grid. I næste eksempel er der sat værdier for rækker (og farver er fjernet fra eksempel fordi jeg ikke kan komme på flere farver).

<!--HTML-->
<section class="container">
  <div>Hello World</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>How</div>
  <div></div>
  <div></div>
  <div>are</div>
  <div></div>
  <div></div>
  <div>you?</div>
</section>
/*--CSS--*/
.container {
  display: grid;
  grid-template-columns: 200px 50px 200px 200px;
  grid-template-rows: 50px 100px 200px;
  text-align: center;
}

I eksemplet ser man, at 1. række er 50px høj, 2. række 100px og 3. række 200px.

fr: fractions

Med CSS grid kan man bruge fr, der står for fractions, altså brøkdele. 1fr svarer til 1 brøkdel af bredden i grid-template-columns og har man delt kolonnerne op som med koden herunder får man 1 kolonne, der fylder 25% af bredden, 1 kolonne, der fylder 50% af bredden og til sidst igen en kolonne, der fylder 25% af bredden.

/*--CSS--*/
.container {
  grid-template-columns: 1fr 2fr 1fr;
}

repeat()

Har man den samme struktur flere gange enten ved grid-template-columns eller grid-template-rows kan man bruge repeat()-funktionen. Her gentages f.eks. samme mønster 3 gange

/*--CSS--*/
.container {
  grid-template-columns: repeat(3, 1fr 2fr 1fr);
}

Skriv et svar

Verified by MonsterInsights