CSS Flexbox and Grid: The future of website layouts - DN Scrum Breakfast - August 28, 2018

Agenda
Old Web Layout Techniques
Flexbox
Tea Break
CSS Grid
Practice Makes Perfect

Header
Navigation
& Banner
Content

<h1>Basic document flow</h1>
<p>...block element…</p>
<p>Span 100% of the width of
our parent element...</p>
<p>Separate by margins...</p>
<p>…<img src=“…”></p>
Normal flow

Float and clear
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<div class="clearfix">
<img class="img2"...></img>
</div>

inline-block
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}

Table layout
.nav-table {
display: table;
...
}
<nav class="nav-table">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
HTML Table and CSS Table.

Positioning techniques
1 Static positioning
3 Absolute positioning
2 Relative positioning
4 Fixed positioning
5 position: sticky

Common issues
Use tricks or hacks
No vertical centering
No equal heights
No source order independence

Flexbox
Nguyen Duy
Senior Web Developer - Axon Active Viet Nam

Agenda
What is Flexbox?
Flexbox container
Flexbox item
Summary

What is flexbox actually?
• Flexbox is a new module in CSS3 that makes it easy to align
elements to one another, in different directions and orders;
• The main idea behind flexbox is to give the container the ability
to expand and to shrink elements to best use all the available
space;
• Flexbox replaces float layouts, using less, and more readable and
logical code;
• Flexbox completely changes the way that we build on-
dimensional layouts;

Flexbox concepts
Main Axis
Cross Axis
Flex Container
Flex Items

.containter {
display: flex;
}
<div class="containter">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.containter {
display: block; /* default */
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
How to create a flexbox layout

.containter {
display: flex;
flex-direction: row;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.containter {
display: flex;
flex-direction: row-reverse;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.containter {
display: flex;
flex-direction: column;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.containter {
display: flex;
flex-direction: column-reverse;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
flex-direction
flex-direction: row | row-reverse | column | column-reverse

flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse
Main Axis
Cross Axis
nowrap
wrap

justify-content
justify-content: flex-start | flex-end | space-between | space-around |space-evenly
flex-start
center
flex-end
Main Axis

justify-content: space-between
space-between
Main Axis
x x x x

justify-content: space-around
space-around
Main Axis
x
2*x
x x

justify-content: space-evenly
space-evenly
Main Axis
x x x x x x

align-items: stretch
align-items: stretch | flex-start | flex-end | center | baseline
stretch
Main Axis
Cross Axis

align-items: flex-start
flex-start
Main Axis
Cross Axis

align-items: flex-end
flex-end
Main Axis
Cross Axis

align-items: center
center
Main Axis
Cross Axis

align-items: baseline
baseline
Main Axis
Cross Axis

.item3 {
align-self: stretch;
}
align-self: stretch
align-self: auto | stretch |flex-start | flex-end | center | baseline
Main Axis
Cross Axis

.item3 {
align-self: flex-start;
}
align-self: flex-start
Main Axis
Cross Axis

.item3 {
align-self: flex-start;
}
align-self: flex-end
Main Axis
Cross Axis

.item3 {
align-self: center;
}
align-self: center
Main Axis
Cross Axis

.item3 {
align-self: baseline;
}
align-self: baseline
Main Axis
Cross Axis

.item4 {
order: -1;
}
order
Main Axis
0 0 0 0

.item4 {
order: 1;
}
order
Main Axis
0 0 00

flex-basis
flex-basis: auto | <len>
Main Axis
flex-basis:100px 100pxflex-basis: 200pxflex-basis: 20%

flex-grow
Main Axis
120px 120px 120px 120pxflex-grow: 1
800-(120*4) = 320px
800px

flex-grow
Main Axis
flex-grow:1 flex-grow: 3flex-grow:1 flex-grow:1 flex-grow: 2

flex-grow
Main Axis
120px 120px flex-basis: 20% 120pxflex-grow: 1
800-(120*3)-160 = 280px
800px

flex-shrink
flex-shrink: 0 | <interger>
Main Axis
flex-basis: 400px;
flex-shrink: 0;
flex-shrink: 1; flex-shrink: 1;

flex (shorthand)
flex-grow: 0
flex-shrink: 1
flex: 0 1 auto | <int> <int> <len>
flex-basis: auto
.item {
flex: 0 1 auto;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

Simple Grid Systems
http://bit.ly/flexbox_grid

Holy Grail Layout
http://bit.ly/flexbox_layout

Vertical Centering
http://bit.ly/flexbox_vertical

Summary
Flexbox is easy and incredibly powerful.
• Use display: flex; to create a flex container.
• Use flex-direction if you need columns instead of rows.
• Use the row-reverse or column-reverse values to flip item order.
• Use justify-content to define the horizontal alignment of items.
• Use align-items to define the vertical alignment of items.
• Use align-self to vertically align individual items.
• Use order to customize the order of individual elements.
• Use flex to create flexible boxes that can stretch and shrink.

CSS Grid
Hai Nguyen
Software Architecture – Axon Active Viet Nam

Agenda
What is CSS Grid?
Basic concepts of grid layout
CSS Grid detail
Defining a Grid Line-based placement
Defining Grid Areas Responsive layout with Media Queries
Grid auto-placement Using Order
Alignment
CSS Grid vs Flexbox Summary

What is CSS Grid?
CSS Grid gives us a method of creating grid structures
that are described in CSS and not in HTML

Why learn CSS Grid layout?
•Easy
•Simpler markup
•Flexible
•Don't need frameworks

The Grid container and Grid Items
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
...
</div>
.container {
display: grid;
}
Grid container
Grid items

Grid Lines
Grid Gap
Grid Lines
1
2
3
2 3 4

Grid Cell

Grid Track

Grid Area

.containter {
padding: 1rem;
}
<div class="item item1">1</div>
</div>
Defining a Grid
wwww
The Grid container
The Grid item

.containter {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 200px
100px;
grid-template-rows: 100px 200px 100px;
padding: 1rem;
}
100px 100px200px
10px
wwww
Defining a Grid
100px
100px
200px

.item4 {
grid-column: 2/4; /* shorthand */
grid-row: 2/4;
}
.item4 {
grid-column: 2/ span 2; /* shorthand
*/
grid-row: 2/ span 2;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.containter {
display: grid;
grid-gap: 20px;
grid-template-columns: 100px 200px
100px;
grid-template-rows: 100px 200px 100px;
padding: 1rem;
}
Line-based placement
2
4
2 4

.containter {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, [col]
100px);
grid-template-rows: repeat(3, [row] auto);
padding: 1rem;
}
.item4 {
grid-column: col 2 / span 2;
grid-row: row 2 / span 2;
}
Using repeat notation
col col col col

header header header
sidebar1 content
sidebar3
sidebar2 content
sidebar4
footer footer footer
.containter {
display: grid;
grid-template-columns: 200px 1fr
200px;
grid-template-rows: 80px 1fr 1fr
80px;
grid-template-areas:
"header header header"
"sidebar1 content sidebar3"
"sidebar2 content sidebar4"
"footer footer footer";
min-height: 100vh;
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
Defining Grid Areas

header header
sidebar1 content
sidebar2 content
sidebar3 content
sidebar4 content
footer footer
@media only screen and (max-width: 1024px) {
.containter {
grid-template-columns: 200px 1fr;
grid-template-rows: 80px repeat(4, auto)
80px;
grid-template-areas:
"header header"
"sidebar1 content"
"sidebar2 content"
"sidebar3 content"
"sidebar4 content"
"footer footer";
}
}
Redefining Grid Areas
with Media Queries

Demo Responsive Design
http://bit.ly/cssgrid_area

.containter {
display: grid;
grid-gap: 20px;
grid-template-columns: 120px 120px 120px;
grid-auto-columns: 100px;
grid-auto-rows: 150px;
padding: 1rem;
}
wwww
Explicit and Implicit Grid
100px
150p
x

.containter {
display: grid;
grid-gap: 20px;
150px);
grid-template-rows: repeat(3, [row]
100px);
grid-auto-flow: column;
padding: 1rem;
}
wwww
Grid auto-flow column grid-auto-flow:
column;

.containter {
display: grid;
grid-gap: 20px;
150px);
grid-template-rows: minmax(80px, auto);
grid-auto-flow: row; /* Default value */
padding: 1rem;
}
wwww
Grid auto-flow row grid-auto-flow: row;

.containter {
display: grid;
grid-gap: 20px;
150px);
grid-template-rows: minmax(80px, auto);
grid-auto-flow: dense;
padding: 1rem;
}
wwww
Grid auto-flow dense grid-auto-flow:
dense;

Demo Image Gallery
http://bit.ly/cssgrid_gallery

.containter {
display: grid;
grid-gap: 20px;
100px);
padding: 1rem;
}
.item1 {
order: 1;
}
.item4 {
order: 2;
}
.item9 {
order: 2;
}
wwww
Using Order

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
align-items: center;
}
.item2 {
grid-column: 3 / span 2;
grid-row: 1 / span 4;
}
wwww
align align-items: center;

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
align-items: start;
}
.item2 {
}
wwww
align align-items: start;

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
align-items: end;
}
.item2 {
}
wwww
align align-items: end;

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
justify-items: center;
}
.item2 {
justify-self: stretch;
}
wwww
justify justify-items: end;

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
justify-items: start;
}
.item2 {
}
wwww

.containter {
display: grid;
grid-gap: 20px;
150px);
100px);
justify-items: end;
}
.item2 {
}
wwww

CSS Grid or Flexbox?
CSS Grid
• Two-dimensional layout model
• Using CSS Grid at the layout level
Flexbox
• One-dimensional layout model
• Using Flexbox at the component level
There is no reason to use only CSS grids or only flexbox.
Learn both and use them together.

Summary
•Easy to create web layout
•Responsive Design
•Production ready
•Become more and more popular

Build a simple responsive layout

Desktop Tablet Mobile
Width > 1024px Width <= 1024px Width <= 768px

Flexbox CSS Grid
bit.ly/flexbox_start bit.ly/cssgrid_start

CSS Flexbox and Grid: The future of website layouts - DN Scrum Breakfast - August 28, 2018

Related slideshows

More Related Content

CSS Flexbox and Grid: The future of website layouts - DN Scrum Breakfast - August 28, 2018

Editor's Notes