CSS Grid vs. Flexbox

CSS Grid vs.
Flexible Box
@evalica

● CSS2
● CSS3
CSS2.1
● no
●
CSS3 Level

Guides & Documentation
MDN: Flexbox
CSS Tricks Guide
MDN: Grid
CSS Tricks Guide

Game Tutorials
Flexbox Froggy Grid Garden

● one direction
●
● direction-agnostic
● cannot overlap
Flexible Box

● two directions
●
● overlap
CSS Grid

Can I use?
Flexible Box
98.30% JUN 2019
@supports not ((display: flex) and (display: grid))
{
div {
float: left;
}
}
CR .

@supports (display: grid) {
.wrapper ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
}
Can I use?
CSS Grid
92.03% JUN 2019CR .

Basic Alternatives
Float GridFlex
<div class="container">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
.container {
}
.box {
float: left;
margin: 5px;
width: 100px;
}
.container {
display: grid;
grid-gap: 10px;
grid-template-columns:
repeat(auto-fit, 100px);
}
.box {
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: 100px;
margin: 5px;
}

.a {
grid-column: 1 / 3;
grid-row: 1;
}
.b {
grid-column: 3;
grid-row: 1 / 3;
}
.c {
grid-column: 1;
grid-row: 2 / 4;
}
.a {
}
.b {
}
.c {
}
.container {
display: grid;
grid-gap: 10px;
grid-template-columns:
repeat(3, 100px);
}
Grid Overlap
.a {
grid-column: 1;
grid-row: 1;
}
.b {
grid-column: 2;
grid-row: 1;
}
.c {
grid-column: 3;
grid-row: 1;
}

Bootstrap 4 - FlexBootstrap 3 - Float
<div class="row">
<div class="col-xs-4">A</div>
<div class="col-xs-4">B</div>
<div class="col-xs-4">C</div>
</div>
</div>
Grid
<div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
</div>
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
.container {
display: grid;
grid-gap: 10px;
}
.col {
grid-column: span 4;
}
.row {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}

.header {
grid-area: H;
}
.panels.A {
grid-area: A;
}
.panels.B {
grid-area: B;
}
.content {
grid-area: C;
}
.footer {
grid-area: F;
}
<body>
<div class="header">H</div>
<div class="content">C</div>
<div class="panels A">A</div>
<div class="panels B">B</div>
<div class="footer">F</div>
</body>
Grid Areas - Easy Prototyping
body {
display: grid;
grid-template-rows: 1fr 4fr 1fr;
grid-template-areas:
"H H H H H H H H H H H H"
"A C C C C C C C C C C B"
"F F F F F F F F F F F F";
}

Display: contents
<body>
</body>
<body>
</div>
</div>
</body>
.container {
display: contents;
}

Can I use?
display: contents
82.38% JUN 2019
ul, ol {
list-style: none;
display: contents;
}
WD .

.download-option {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / -1;
}
<div class="download-options">
<div class="download-option">
<div>...</div>
<h3>...</h3>
<ul><li>...</li></ul>
<p>...</p>
<div><a>...</a><a>...</a></div>
</div>
...
SubGrid - Cards Alignment
.download-options {
display: grid;
grid-template-rows: repeat(5, auto);
}

Can I use?
Subgrid
0.0% JUN 2019
.items {
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: minmax(100px, auto);
}
WD .

●
●
●
●
●
●
Conclusions: Grid vs. Flex

References
● A Complete Guide to Flexbox
● A Complete Guide to Grid
● MDN: CSS layout
● MDN: Subgrid
● Grid by Example
● The Experimental Layouts Lab
● [Games] Grid Garden + Flexbox Froggy
● [Video] Flexbox vs. CSS Grid — Which is
Better?
● [Video] Hello Subgrid!
● [Video] CSS Grid: Moving From CSS
Frameworks To CSS Grid (2018 and beyond)
● CSS Grids — How Everyone Has Been
Building The Web Wrong Before 2018

CSS Grid vs. Flexbox

More Related Content

What's hot

Similar to CSS Grid vs. Flexbox

More from Ecaterina Moraru (Valica)

Recently uploaded

CSS Grid vs. Flexbox