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
fr
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
fr
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
Copy of Styling with Style
By Josh Holladay
