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-item {
order: 1;
}Order
Flex Item Properties
.flex-item {
flex-grow: 0; /* default is 0 */
flex-shrink: 1; /* default is 1 */
}Grow and Shrink
Flex Item Properties
.flex-item {
flex-basis: 150px; /* Can use any size suffix,
note that %'s don't work in iOS */
}Flex Basis
Flex Item Properties
Flex Shorthand
.flex-item {
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
Grid Basics
Grid Containers
display: grid
grid-template-columns
grid-temaplate-rows
grid-template-areas
grid-column-gap
grid-row-gap
grid-template-gap
grid-gap
Building a Container
.grid-container {
display: grid
}
.grid-container {
display: grid
grid-template-columns: 150px 150px 150px 150px 150px
grid-template-rows: repeat(3, 150px);
}
.grid-container {
display: grid
grid-template-columns: repeat(5, 150px);
grid-template-rows: repeat(3, 150px);
grid-gap: 10px;
}
Grid Items
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-area
span
Placing Grid Items
.item-c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background-color: orange;
}
.item-a {
grid-column: 1 / 2;
grid-row: 1 / span 3;
background-color: green;
}
.item-b {
grid-area: 2 / 3 / 5 / 5;
/* <row-start> / <column-start> / <row-end> / <column-end> */
background-color: blue;
}Grid Area Layout
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: aside;
}
.item-d {
grid-area: footer;
}
.grid-container {
grid-template-columns: repeat(4, 150px);
grid-template-rows: repeat(4, 120px);
grid-template-areas:
"header header header header"
"main main main aside"
"main main main aside"
"footer footer footer footer";
}Grid Crazy
Let's Get Grid Crazy
.items {
color: white;
background: darkslategray;
padding: 15px;
}
.boat img {
width: 250px;
}
.logo img {
width: 120px;
}
.item-1 {
grid-area: one;
background: blue;
}
.item-2 {
grid-area: two;
}
.item-3 {
grid-area: three;
}
.item-4 {
grid-area: four;
padding: 0;
}
.item-5 {
grid-area: five;
background: red;
padding-top: 25px;
text-align: center;
font-size: 20px
}
.item-6 {
grid-area: six;
}
.item-7 {
grid-area: seven;
}
.item-8 {
grid-area: eight;
padding: 0px;
background: none;
}.grid-container {
display: grid;
grid-template-columns: repeat(7, 120px);
grid-template-rows: repeat(7, 80px);
grid-gap: 10px;
grid-template-areas:
". one . . . . ."
"eight one six six six six ."
"seven one six six six six ."
"seven four four five five five five"
"seven four four two two three ."
"seven four four two two three ."
". four four . . three .";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Crazy</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="grid-container">
<div class="item-1 items">1</div>
<div class="item-4 items img-1"><img src="./img.png"></div>
<div class="item-5 items">This is where item five resides</div>
<div class="item-6 items">6</div>
<div class="item-7 items">7</div>
<div class="item-8 items img-2"><img src="./logo.png"></div>
<div class="item-2 items">2</div> <!-- line 16 -->
<div class="item-3 items">3</div> <!-- line 17 -->
</div>
</body>
</html>Responsive Design
Responsive By Nature
fr unit
auto-fill
auto
grid-auto-columns
grid-auto-rows
minmax(200px, 1fr)
.grid-container {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);
}
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}.grid-container {
display: grid;
width: 750px;
grid-template-columns: 150px 1fr 2fr;
}
/* a column with min width of 200px, max of 250px, and two columns of 1fr */
grid-template-columns: minmax(200px, 250px) 1fr 1fr;Media Queries
Change how many columns or rows
Change where the items are placed
@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;
}
}
.box-title
grid-column: 1 / -1;
grid-row: 1;
}Media Queries
@media all and (min-width: 53.125em) {
.new-item {
grid-column: 1 / 7;
grid-row: 1 / 3;
}
}
Media Queries
@media all and (min-width: 75em) {
.box-title {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
}.box-title
grid-column: 1 / -1;
grid-row: 1;
}Can I Use...
Feature Queries
@supports not (display: grid) {
div {
display: flex;
}
}Fallbacks & Overides
Flexbox and Grid
Resources
Rachel Andrew
"Queen of Grid"
CSS Grid Garden
Mozilla's Grid Waffle
