Egenskaper - Grid (CSS3)

Innehåll

Rutnät (grids) är två dimensionella samt bygger på kolumner och rader, även kallade spår (tracks) och linjer (lines). Linjerna används bl.a. för att positionera innehåll i rutnät samt finns mellan spåren (kolumnerna/raderna) liksom först och sist. Det finns alltså en fler av linjer än det finns kolumner respektive rader. Områdena innanför linjer kallas för celler och området mellan två celler för mellanrum (gaps). En eller flera celler kan kan defineras som en area, som också kan användas för att positionera innehåll i rutnät.

Rutnätet byggs upp genom att definera behållare (containers) och delar (items), d.v.s. vissa CSS-egenskaper appliceras på behållare medan andra på delarna (och några egenskaper "överlappar", d.v.s. egenskaper för behållare och delar har samma/liknande funktion).

2020-04-19: Denna webbsida är under utveckling!

Egenskaper för behållare (containers) som behandlas på denna webbsida:

Egenskaper för delar (items) som behandlas på denna webbsida:

Jag vill passa på att påminna om min mycket begränsade designförmåga. :-) Så innehållet i denna sida bör ses som en start för att lära sig använda grid i CSS, så för att verkligen kunna använda rutnät som det är tänkt behöver andra resurser användas (se referenser i slutet på sida).

I sin enklaste form så behövs bara en behållare och en eller flera delar samt stil innehållande display: grid för behållare (se markerad egenskap i stilmallar nedan). (I detta exempel har även mellanrum mellan celler definerats liksom färg och storlek på delar för att göra dem synliga. ;-))

.container {
  display: grid;
  gap: 1em;                /* Separera celler */
}
.item {
  background-color: khaki; /* Gör cell synlig ...      */
  height: 50px;            /* ... m färg o storlek ;-) */
  width: 100px;
}

Med tre delar så består rutnätet av en kolumn och tre rader (se exempel).

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

För att skapa ett rutnät med flera kolumner använder man egenskapen grid-template-columns. Antalet rader kommer avgöras av hur många delar som finns i behållare och radhöjder kommer anpassas till cell med "högst innehållet" i respektive rad.

I exempel nedan så defineras tre kolumner om 50, 75 resp. 100 pixlar.

.container {
  display: grid; 
  gap: 1em; 
  grid-template-columns: 50px 75px 100px;
}
.item {
  background-color: khaki; /* Gör cell synlig ;-) */
}

HTML-kod består sen av en behållare och en del för varje cell.

<div class="container">
  <div class="item">1 Denna cell avgör höjd på rad</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5 Liksom denna cell</div>
  <div class="item">6</div>
</div>

Bredder på kolumner och höjder på rader kan anges som explicita värden, överlåtas till webbläsare att avgöra eller blandas. För att överlåta bredder/höjder till webbläsare används måttenheten fraktioner (fr).

Fraktioner beräknas utifrån den bredd eller höjd som blir över när alla kolumner resp. rader med explicita värden allokerats plats och fördelas sen enligt antal fraktioner som specifierats i rad/höjd.

I exempel nedan så har tre kolumner med specifika bredder definerats (50, 75, resp. 100 pixlar) samt två kolumner mellan dem om 1 resp. 2 fraktioner, d.v.s. kolumn 4 blir dubbelt så bred som kolumn 2. (Horisontell linje med full bredd har lagts till ovanför rutnät för referens.)

.container {
  display: grid; 
  gap: .2em; 
  grid-template-columns: 50px 1fr 75px 2fr 100px;
}

Om alla kolumner ska vara lika breda så kan man använda funktionen repeat(), till vilken man skickar antal gånger att repetera och bredden på alla kolumner.

.container {
  display: grid; 
  gap: .2em; 
  grid-template-columns: repeat(5, 50px);
}

Rutnät kan användas till att definera kolumner vars antal ändras beroende på bredden på webbläsare, d.v.s. ett responsivt rutnät.

Exempel 1 - ????

• Layout Land, YouTube-kanal av Jen Simmons.
• A Complete Guide to Grid, CSS Tricks