Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Stefan Baumgartner

Other Decks in Technology


  1. 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
  2. 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
  3. .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
  4. .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
  5. .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
  6. -1 1 3 items .item { order: <integer> } you

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

    by align-items. align-self: flex-end A
  9. A grid track is between two adjacent grid lines. They

    are like rows and columns of a table
  10. 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
  11. 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
  12. 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