Illustrations by

lauripop

Workshop Details

• 20 minute run through of the history of CSS Layout

• 30 or 40 minute practical part, play with some examples complete some tasks. If you don't have a laptop try to work in pairs or groups with someone that does.
  
  Clone this repo.
  https://github.com/CodeHubOrg/css-layout

• Conclusion, final questions

Straw poll

Who has used ... for layout before?

tables!

• Not intended for page layout

floats

• CSS Level 1 spec in 1996
• Widely used from 2004

• Not intended for page layout

[2] from css-tricks.com

floats

• Grid items heights are not equalised

floats

• Have to deal with clearing floats (responsive)

display:table

• CSS Level 2 spec in 1998
• No popular browser support until 2008/2009
• Can be used to vertically align items
• Not great for page layout (especially responsive)

• Not intended for page layout

display:inline-block

• No popular browser support until 2008/2009

• Not intended for page layout

display:inline-block

• unequal heights like float

• no need to clear floats!
• much better than floats for responsive layouts

display:inline-block

But!

• We do have to deal with whitespace!

display:inline-block

• Fighting whitespace with inline-block elements

• https://css-tricks.com/fighting-the-space-between-inline-block-elements/

flexbox

• First proposed as a W3C spec in 2009

• Is intended for page layout!

• Heralds the start of what Eric Meyer calls
   'The era of intentional layout'

flexbox

• Lay items out along a line (horizontally or vertically)
• Justify the items
• Control the start and end points of items
• Align items (Vertical center!)
• Change order independent of source
• Can be used to progressively enhance a layout made
  with floats or inline-block

• Cannot do multi dimensional layout

https://css-tricks.com/all-about-floats/

flexbox

Defined using the display property.

.container {
    display: flex;
}

This makes all of its direct children elements flex. Now you can control those elements in a variety of ways.

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

Flexbox lets you fill the available space. By default flex items height fill their container (equalised heights). They do what we have be achieving with floats and inline-block but are designed to to it.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

one / multi dimensional layouts

• Float, inline-block, flexbox,
  All only support one dimensional layouts.
• Multi dimensional layouts can be achieved by nesting 

one / multi dimensional layouts

• This is a one dimensional layout 
• Just column spanning

one / multi dimensional layouts

• This is a also a one dimensional layout
• The items are just wrapped, essentially they are just one long line.
• Only column spans specified no row spans

one / multi dimensional layouts

• Multi dimensional layout
• It has both column and row and spanning

one / multi dimensional layouts

This multi dimensional layout could be constructed by creating three different grids and nesting them (floats, inline-block or flexbox)

CSS grid

• First public draft specification in 2011
• Put forward and developed by Microsoft. Early implementation in IE10, since then the spec has changed.
• Currently has to be turned on by flags in firefox, chrome and opera

• Is intended for page layout!

CSS grid

• Can do multi dimensional layout!
• Source order independence (be careful)
• Define the grid, then place items on it

http://gridbyexample.com/

CSS grid

• When defining a grid it helps to sketch it out to visualise it.
• You have to define margins (for now)
• Red numbers rows, green numbers (columns)

CSS grid

• display:grid
• define columns
• define rows
• 0.5em width margins

.grid {
    display: grid;
    grid-template-columns: auto 0.5em auto;
    grid-template-rows: auto 0.5em auto 0.5em auto;
}

CSS grid

• place nav on grid
• Comments show example using span keyword
• This example is using line based placement

.grid nav {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    /* grid-column: 1 / span 1 */
    /* grid-row: 1 / span 3 */
}

CSS grid

• place header on grid
• Comments show example using span keyword
• This example is using line based placement

.grid header {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    /* grid-column: 3 / span 1; */
    /* grid-row: 1 / span 1; */
}

CSS grid

• place aside on grid
• This example is using line based placement

.grid aside {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

CSS grid

• place article on grid
• This example is using line based placement

.grid article {
    grid-column: 3 / 4;
    grid-row: 3 / 6;
}

CSS grid

other ways to layout grids:-

• named lines
• grid areas

http://gridbyexample.com by Rachel Andrew is an excellent resource for exploring all the other properties and possibilities of grids.

Tasks!

Clone this repo.
https://github.com/CodeHubOrg/css-layout

30 or 40 minute practical part, play with some examples complete some tasks. If you don't have a laptop try to work in pairs or groups with someone that does.