Menu

We are the JSLeague

UI Layouting
with Flexbox & CSS Grid

Course duration

  • 1 day

Technical requirements

  • 80%
    HTML5
  • 65%
    CSS

Flexbox description

  1. CSS overview
  2. Responsiveness
  3. Features of Flexbox & supporting browsers
  4. Flex Containers
  5. Flex-Direction
  6. Flex-Wrap
  7. Justifying contents
  8. Align items
  9. Align content
  10. Flex-Order
  11. Flexibility
  12. Align self
  13. Layouting examples for interfaces

CSS Grid description

  1. Introduction
  2. Grid container rows & columns
  3. Properties for parents
  4. Properties for children
  5. Grid-template-areas
  6. Grid-gap: grid-column-gap & grid-row-gap
  7. Justifying & aligning items
  8. Justifying & aligning content
  9. Grid-auto-columns & grid-auto-rows
  10. Grid-auto-flow
  11. Grid Items
  12. Grid-area
  13. Justifying & aligning self
  14. Place-self
  15. Masonry grid layout example
  16. Animating grid layout properties

Full Curricula

Interested in other JS trainings ?

jsleague logo big