Pro Yearly is on sale from $80 to $50! »

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

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

September 23, 2017
Tweet

Transcript

  1. GET A GRID FOR FLEX’ SAKE

  2. @ddprrt fettblog.eu

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

  4. A PODCAST ABOUT JAVASCRIPT soundcloud.com/scriptcast

  5. C S S

  6. C S S entering hit ometimes

  7. LAYOUT

  8. WE ALL FLOAT DOWN HERE

  9. ENTER FLEXBOX (2009)

  10. FLEXBOX IS AN ALGORITHM FOR SINGLE LINE SPACE DISTRIBUTION

  11. DEMO TIME!

  12. container items .container { display: flex; } activates flex box

    also available as inline-flex
  13. CONTAINER PROPERTIES

  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
  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
  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
  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
  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
  19. ITEM PROPERTIES

  20. -1 1 3 items .item { order: <integer> } you

    can change the order of the items by using an integer
  21. 1 items .item { flex-grow: <integer> } 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
  22. items .item { align-self: … } Overrides the alignment set

    by align-items. align-self: flex-end A
  23. DEFINE LAYOUTS AT THE PARENT LEVEL

  24. CHILDREN CAN MAKE EXCEPTIONS

  25. PARENTS DEFINE RULES CHILDREN REBEL

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

  27. ENTER GRID (2012)

  28. DEMO TIME!

  29. TERMINOLOGY

  30. grid consists of rows and columns. direct HTML descendants of

    a grid container are grid items.
  31. grid lines make up the structure of the grid. There

    are row and column grid lines
  32. A grid track is between two adjacent grid lines. They

    are like rows and columns of a table
  33. A grid area is anything between two row grid lines

    and two column grid lines
  34. MAJOR GRID CONTAINER PROPERTIES

  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
  36. MAJOR GRID ITEM PROPERTIES

  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
  38. AWESOME GRID FEATURES

  39. repeat(…, <tracks>) 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
  40. None
  41. DEFINE TEMPLATES LET AUTO-LAYOUT DO THE REST

  42. PARENTS DEFINE RULES CHILDREN REBEL

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

  44. None
  45. @ddprrt fettblog.eu