$30 off During Our Annual Pro Sale. View Details »

Get a grid for flex' sake

Get a grid for flex' sake

A presentation concerning the new CSS layout: Grid and flexbox. Done with lots of live coding

Stefan Baumgartner

September 23, 2017
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

Transcript

  1. GET A GRID
    FOR FLEX’ SAKE

    View Slide

  2. @ddprrt
    fettblog.eu

    View Slide

  3. A CONFERENCE ABOUT JAVASCRIPT
    JANUARY 19, 2018
    LINZ, AUSTRIA
    scriptconf.org

    View Slide

  4. A PODCAST ABOUT JAVASCRIPT
    soundcloud.com/scriptcast

    View Slide

  5. C S S

    View Slide

  6. C
    S
    S
    entering
    hit
    ometimes

    View Slide

  7. LAYOUT

    View Slide

  8. WE ALL FLOAT DOWN HERE

    View Slide

  9. ENTER FLEXBOX (2009)

    View Slide

  10. FLEXBOX IS AN
    ALGORITHM FOR
    SINGLE LINE SPACE DISTRIBUTION

    View Slide

  11. DEMO TIME!

    View Slide

  12. container
    items
    .container {
    display: flex;
    }
    activates flex box
    also available as inline-flex

    View Slide

  13. CONTAINER PROPERTIES

    View Slide

  14. A
    .container {
    flex-direction: row | row-reverse | column | column-reverse;
    }
    changes the direction of the
    main axis
    B C C B A A
    B
    C
    C
    B
    A

    View Slide

  15. container
    .container {
    flex-wrap: nowrap | wrap | wrap-reverse;
    }
    flex-wrap allows items
    to flow into the next row
    if no space is available.
    The next row has the same
    spacing conditions as the
    original one, but starts
    anew with alignment

    View Slide

  16. .container {
    justify-content: flex-start | flex-end | center | space-between
    | space-around;
    }
    justify-content aligns items
    along the main axis. This is
    where the main space
    distribution algorithm
    comes in.
    flex-start
    flex-end
    center
    space-between
    space-around

    View Slide

  17. .container {
    align-items: stretch | flex-start | flex-end | centre | stretch | baseline;
    }
    align-items aligns elements across
    the cross axis
    flex-start flex-end
    center stretch
    A
    baseline
    B C

    View Slide

  18. .container {
    align-content: stretch | flex-start | flex-end | center | stretch |
    space-between | space-around;
    }
    align-content takes care of spaces between multiple lines
    flex-start flex-end center
    space-between space-around stretch

    View Slide

  19. ITEM PROPERTIES

    View Slide

  20. -1 1 3
    items
    .item {
    order:
    }
    you can change the order
    of the items by using an
    integer

    View Slide

  21. 1
    items
    .item {
    flex-grow:
    }
    flex-grow is the greedy operator. It tries
    to take as much space as is available.
    If the number is higher, the growth is
    n-times higher with each iteration cycle.
    1 1
    1 1
    2
    flex-shrink is humble. The higher the
    number, the more space it gives to
    greedy elements
    flex-basis is a width value where
    elements start to grow

    View Slide

  22. items
    .item {
    align-self: …
    }
    Overrides the alignment set by
    align-items.
    align-self: flex-end
    A

    View Slide

  23. DEFINE LAYOUTS AT THE
    PARENT LEVEL

    View Slide

  24. CHILDREN CAN MAKE
    EXCEPTIONS

    View Slide

  25. PARENTS DEFINE RULES
    CHILDREN REBEL

    View Slide

  26. REAL CSS LAYOUT, BUT IN
    BREATH-TAKING 2D?

    View Slide

  27. ENTER GRID (2012)

    View Slide

  28. DEMO TIME!

    View Slide

  29. TERMINOLOGY

    View Slide

  30. grid consists of rows and columns.
    direct HTML descendants of a grid
    container are grid items.

    View Slide

  31. grid lines make up the structure of the
    grid. There are row and column grid lines

    View Slide

  32. A grid track is between two adjacent
    grid lines. They are like rows and columns
    of a table

    View Slide

  33. A grid area is anything between two
    row grid lines and two column grid lines

    View Slide

  34. MAJOR GRID CONTAINER
    PROPERTIES

    View Slide

  35. display: grid Activates the grid
    grid-gap Defines the size of grid lines
    grid-template-rows
    grid-template-columns
    Defines the grid tracks, in size,
    optional names
    grid-template-areas Defines the names of grid areas
    grid-auto-flow
    Defines in which direction (row/
    column) new tracks should be
    added

    View Slide

  36. MAJOR GRID ITEM PROPERTIES

    View Slide

  37. grid-row-start
    grid-row-end
    Define the grid row to start and
    end
    grid-column-start
    grid-column-end
    Same for columns
    grid-area
    Or just place it in one of the
    named areas

    View Slide

  38. AWESOME GRID FEATURES

    View Slide

  39. repeat(…, ) Bored of typing? Use repeat
    1fr
    No more dealing with
    percentages… fraction units help
    splitting up the main area
    auto-fill
    Use in repeat-function, repeats the
    tracks as much as there is space!
    minmax(minvalue, maxvalue)
    Perfect usage with fraction units:
    Decide between a fixed value and
    the nearest relative value

    View Slide

  40. View Slide

  41. DEFINE TEMPLATES
    LET AUTO-LAYOUT DO THE REST

    View Slide

  42. PARENTS DEFINE RULES
    CHILDREN REBEL

    View Slide

  43. USE GRID FOR PAGE/AREA LAYOUTS
    FLEXBOX FOR WIDGETS

    View Slide

  44. View Slide

  45. @ddprrt
    fettblog.eu

    View Slide