CSS Grid

Grid basics

Grid container

rechtstreekse parent van de grid items

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

Grid lines

verdeel-lijn

Grid Track

De ruimte tussen twee grid-lijnen.

Grid Area

Volledige ruimte die tussen 4 grid-lijnen ligt

Grid Cel

Een enkelvoudige unit

Display: grid

aanmaken van een nieuw grid

.container {
  display: grid | inline-grid;
}

Columns

grid-template-columns

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Rows

grid-template-rows

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

Sizing keywords

min-content: the minimum size of the content. Imagine a line of text like “E pluribus unum”, the min-content is likely the width of the word “pluribus”.
max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.
auto: this keyword is a lot like fr units, except that they “lose” the fight in sizing against fr units when allocating the remaining space.
fit-content: use the space available, but never less than min-content and never more than max-content.
fractional units

CSS Tricks: Fitcontent

{
  grid-template-columns: fit-content(150px) 150px 1fr;
}

Fraction

Fraction unit: fr

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

repeat()

repeat(#, ... )

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

Grid-auto-rows & grid-auto-columns

De grootte bepalen van de auto-gegenereerde tracks (impliciete grids)

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Sizing function: Minmax()

bepalen van een minime en maximum waarde

.wrapper {
	grid-template-columns: minmax(100px, 1fr) 3fr;
}

column-gap & row-gap

bepalen van een minime en maximum waarde

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
  /* gap: 15px 10px; */
}

Optie 1: columns & rows

Werken met columns and rows

Grid kolommen en rijen bepalen en de content de kolommen en rijen laten volgen.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px 100px;
}

Optie 2: start & end

column/row -start & end

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Verkorte notatie

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.box2 {
  grid-column: 1;
  grid-row: 3 / 5;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Optie 3: Template areas

Template areas

Een grid template gaan bepalen door een grid area-namen te geven

Template areas

Een grid template gaan bepalen door een grid area-namen te geven

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

<grid-area-name> – the name of a grid area specified with grid-area
. – a period signifies an empty grid cell
none – no grid areas are defined

Template areas


.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

items uitlijnen

CSS Tricks

CSS Grid

By Evelien Rutsaert

CSS Grid

More from Evelien Rutsaert