reading-notes

Responsive Web Design and Regular Expressions

Source: CSS Grid Garden

Grid setups up columns and rows, and you define where elements call against the grid

Container Properties

• display: grid
• grid-template-columns
• grid-template-rows
• grid-template rows / columns

Container Examples

Use repeat value to repeat same values

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: repeat(5, 20%);
}

Can mix and match values (px, %, em, fr)

#garden {
  display: grid;
  grid-template-columns: 100px 3em 40%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

Use fr value to indicate a “fraction”. Will divide whatever space is avaliable.

#garden {
  display: grid;
  grid-template-columns: 1fr 5fr; /** 1/6 & 5/6 **/
  grid-template-rows: 20% 20% 20% 20% 20%;
}

Use grid-template as shorthand

#garden {
  display: grid;
  grid-template: 60% 1fr / 200px 1fr;
}

Element Properties

Rows & Columns

• grid-column-start defines when to start
• grid-column-end defines where to end, exclusive
• grid-column set both start/end
• grid-row-start
• grid-row-end
• grid-rows
• grid-area row-start / col-start / row-end / col-end

Examples

End can be less than start to go backward

#water {
  grid-column-start: 5;
  grid-column-end: 1;
}

Values can be negative to count from opposite direction

#water {
  grid-column-start: -3;
  grid-column-end: 5;
}

Use span to set number of columns to cover (start or end)

#water {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

Use grid-area shorthand

#water {
  grid-area: 1 / 2 / 4 / 6
}

Ordering

• order sets order if no explicit placement defined

Order can be negative

Element Examples

.water {
  order: 0;
}

#poison {
order: 1
}

Back