Styling with Style

Flexbox and CSS-Grid

Josh Holladay & Brian Barrow

Layout History

Tables

Floats

Let's Talk About Flex... maybe

Flex Container

.flex-container {
  display: flex
}

OR 

.flex-container {
  display: inline-flex
}

Main Axis vs Cross Axis

.flex-container {
  flex-direction: row || column; 
}

Flex Direction

Flex Container Properties

.flex-container {
  flex-wrap: nowrap || wrap || wrap-reverse;
}

Flex Wrap

Flex Container Properties

.flex-container {
  flex-flow: row wrap; /* direction row, wrap items */
}

Flex Flow

Flex Container Properties

.flex-container {
  justify-content: flex-start || flex-end || center || 
     space-between || space-around;
}

Justify Content

Flex Container Properties

.flex-container {
  align-items: flex-start || flex-end || center ||
     stretch || baseline;
}

Align Items

Flex Container Properties

.flex-container {
  align-content: flex-start || flex-end || center ||
     stretch;
}

Align Content

Flex Container Properties

.flex-container {
    order: 1;
}

Order

Flex Item Properties

.flex-container {
    flex-grow: 0; /* default is 0 */
    
    flex-shrink: 1; /* default is 1 */
}

Grow and Shrink

Flex Item Properties

.flex-container {
    flex-basis: 150px; /* Can use any size suffix, 
      note that %'s don't work in iOS */
}

Flex Basis

Flex Item Properties

Flex Shorthand

.flex-container { 
    flex: 0 1 auto; /* shortand: flex-grow flex-shrink
      flex-basis */
}

Flex Item Properties

.flex-item {
    align-self: auto || flex-start || flex-end 
      || center || baseline || stretch;
}

Align-self

Component Layout

When To Use Flexbox?

Entering the Grid

Mind Opening Concept

Use Case

Grid Basics

Container

display: grid

grid-template-columns

grid-temaplate-rows

grid-template-areas

grid-column-gap

grid-row-gap

grid-template-gap

grid-gap

repeat

minmax()

Let's Build

.grid-container {
    display: grid

.grid-container {
    display: grid
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px;
}

.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 2 / 3;
}

Let's Build

.grid-container {
    display: grid

.grid-container {
    display: grid
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px;
}

.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 2 / 3;
}

Items

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-row

span

auto placement

Grid Area

fr unit

Responsive Design

repeat

auto-fill

minmax(200px, 1fr)

auto

Media Queries

Change how many columns or rows

Change where the items are placed

.box-title
    grid-column: 1 / -1;
    grid-row: 1;
}

@media all and (min-width: 53.125em) {
    .box-title {
        grid-column: 1 / 6;
        grid-row: 1 / 3;
    }
}

@media all and (min-width: 75em) {
    .box-title {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }
}

Media Queries

Can I Use...

Fallback

feature queries

Can I Use...

Resources

Rachel Andrew

'Queen of Grid'

CSS Grid Garden

Mozilla's Grid Waffle

Grid

Flexbox

Grid