Skip to content

Latest commit

 

History

History
50 lines (42 loc) · 1.93 KB

README.md

File metadata and controls

50 lines (42 loc) · 1.93 KB
Raw

Module 4 - CSS Grids

Introduction to Grid Layout

  • What is grid layout?
  • How to define elements as grid container and grid items

Grid Container Templates

  • How to define the number of rows and columns
  • The grid-template-rows and grid-template-columns container properties
  • The sizing units of rows and columns
  • The fr unit
  • The repeat function
  • The gap, column-gap and row-gap container properties

Line based placement

  • The grid-column-start, grid-column-end, grid-row-start and grid-row-end item properties
  • The grid-column and grid-row groups
  • Using negative line numbers
  • Using span value

Placement with line names

  • Naming a line in the grid template
  • Using line name in item placement
  • Repeating the same name several times

Placement with grid-template-areas

  • The grid-template-areas container property
  • The grid-area item property

Grid auto placement and generation in details

  • The grid-auto-flow container property
  • The grid-auto-columns, grid-auto-rows container properties
  • The dense property values

Grid alignment

  • The justify-items container property
  • The align-items container property
  • The place-items group
  • The justify-content and align-content container properties
  • The place-content group property
  • The align-self and justify-self item properties
  • The place-self group property

Extra links