Styling with Style
Flexbox
Text
Layout History
Tables
Floats
Let's Talk About Flex
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 Container Properties
display: grid
grid-template-columns
grid-temaplate-rows
grid-template-areas
grid-column-gap
grid-row-gap
grid-template-gap
grid-gap
.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;
}
Building a Grid Container
Grid Items Properties
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-area
span
.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-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
background-color: green;
}
.item-b {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
background-color: blue;
}Placing Grid Items
.item-c {
grid-column: 5 / 6;
grid-row: 1 / 2;
background-color: orange;
}
.item-a {
grid-column: 1 / 2;
grid-row: 1 / span 3;
background-color: green;
}
.item-b {
grid-column: 3 / 5;
grid-row: 2 / span 2;
background-color: blue;
}Placing Grid Items
.item-c {
grid-area: 1 / 5 / 2 / 6;
background-color: orange;
}
.item-a {
grid-area: 1 / 1 / 4 / 2;
background-color: green;
}
.item-b {
grid-area: 2 / 3 / 4 / 5;
background-color: blue;
}
/* <row-start> / <column-start> / <row-end> / <column-end> */
/* counter-clockwise starting at the top */Placing Grid Items
Grid Template Areas
.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";
}
The Power of Grid
.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
fr unit
auto
max-content
min-content
auto-fill
minmax()
.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;Responsive By Nature
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}.grid-container {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(3, 150px) 2fr
}grid-template-columns: minmax(max-content, 300px) 1fr 150px;body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}From 1 to -1
.item-a {
grid-column: 1 / -1;
grid-row: 1;
}
Media Queries
Change how many columns or rows
Change where the items are placed
Media Queries
@media all and (min-width: 53.125em) {
.new-item {
grid-column: 1 / 7;
grid-row: 1 / 2;
}
}
.new-item
grid-column: 1 / -1;
grid-row: 1;
}Media Queries
@media all and (min-width: 75em) {
.new-item {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
}.new-item
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
