• Grid (Tekstindhold)
  • Eksempler
  • Template udvikling
  • For Udviklere

    • Grid (Tekstindhold)

    I denne artikel:

      Introduktion

      I webshoppens tekster er det muligt, at opsætte kolonner af indhold, i stil med Torque UI Grids, som benyttes til opbygning af shoppens overordnede layouts. Denne type er beskrevet i denne artikel.
      Kolonnetypen vi beskriver her benyttes alle steder, hvor en tekstbehandler anvendes til at danne teksten, såsom sideindhold og beskrivelser.

      I praksis virker denne kolonneopdeling ved, at man opretter en række kasser med indhold, og så definerer hvor mange af disse kasser, der skal vises på hver række.
      I webshoppens tekstbehandler kan man vælge op til 4 kolonner, men dette kan tilrettes i sidens kildekode, så man selv kan definere hvor mange kolonner indholdet skal vises i.

      Containers

      For at aktivere kolonnevisningen skal indholdet placeres i en overordnet container med CSS klassen .ck-content. Denne klasse angives automatisk på sideindhold og beskrivelser.
      Kolonne-indholdet skal derefter placeres i endnu en container, denne med klassen .grid. Denne container indeholder også informationer omkring kolonnevisningen.
      Slutteligt skal hver indholdskasse placeres i en container med klassen .grid-cell.

      
<div class="ck-content">

  <div class="grid" data-rows="1" data-columns="4">

    <div class="grid-cell">

      ...

    </div>

    ...

  </div>

</div>

      Kolonneindstillinger

      På containeren med klassen .grid kan der angives hvor mange rækker og kolonner indholdet skal vises i:

      • data-rows: Antallet af rækker
      • data-columns: Antallet af kolonner

       

      Breakpoints

      Ved en skærmbredde på 959px eller under bliver kolonnevisningen nulstillet, så indholdet vises i to kolonner med samme bredde. Har man lavet ændringer til højden, som beskrevet i den næste sektion, vil disse også blive nulstillet, og rækkernes højde bliver ved denne skærmstørrelse defineret ud fra tekstindholdet.

      Ved en skærmbredde på 600px eller under bliver kolonnerne rettet yderligere, så de her vises i 1 kolonne, der fylder hele sidebredden.

       

      Kolonnestørrelser

      Som udgangspunkt bliver kolonnerne opdelt ligeligt, så alle kolonner har samme bredde. Rækker inddeles ligeledes, så de har samme højde. I visse tilfælde kan det foretrækkes, at f.eks. have 1 kolonne, der fylder halvdelen af siden, og derefter 2 kolonner med hver 25% af sidebredden. Andre gange er det måske brugbart, at første kolonne har en bestemt højde, men resten af rækkerne vises med automatisk højde.
      Dette styres med CSS, hvor vores standard-værdier ved 4 kolonner er:

      
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, auto);

      Vi bruger repeat() funktionen for, at angive, at alle kolonner og rækker skal defineres med de samme værdier. På den måde sikrer vi, at kolonner altid har den samme bredde. Rækkerne får højdre fra indholdet grundet auto værdien.
      1fr i grid-template-columns betyder her "1 fraction". Vi angiver på den måde, at der skal defineres 4 kolonner, som hver har bredden 1fr. Bredden på kolonnerne kan derfor i dette eksempel udregnes med: 100% / 4 = 25%.

      Herunder finder du eksempler på forskellige opsætninger af kolonnevisningen.

      Eksempler

      Standardvisning for 4 kolonner

      
<div class="ck-content">

  <div class="grid" data-rows="1" data-columns="4">

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

  </div>

</div>

       

      En forstørret kolonne

      
<div class="ck-content">

  <div class="grid" data-rows="1" style="grid-template-columns:2fr 1fr 1fr;">

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

  </div>

</div>

       

      Forstørret række

      
<div class="ck-content">

  <div class="grid" data-columns="2" style="grid-template-rows:1fr 2fr;">

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

    <div class="grid-cell">...</div>

  </div>

</div>

       

      Nyttige links