CSS Layout
@codekipple
Carl Hughes
Illustrations by
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
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.
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
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:-
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.
Thanks
Text
Any questions?
CSS Layout
By codekipple
CSS Layout
- 3,682