Tobias Hartmann
Lead Frontend Devloper at Sitewards FFM - loves JavaScript and all kind of CSS coding, certified Magento Frontend Developer, ongoing speaker and contributer to hoodie.
DEAD OF THE
12 COL SYSTEM
the old fashion way (still used by many)
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
.col-md-1 {
width: 8.33333333%;
}
.col-md-1, ... {
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}it worked, somehow
code bloat
floting is often annying
no reordering (besides float:right)
...
the flexbox way (a quite old new kid in town)
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
supercharged flexibility
reordering of cols
less code
positioning \o/
and many more
acts strange (1px shifts)
sometimes more control needed
best for horizontal layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
resources
https://getbootstrap.com/docs/4.3/layout/grid/
http://flexboxgrid.com/
THE
NEW
HERO
css grid (the real shit)
<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 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
but this is just the beginning
the difference to flexbox
source: http://maddesigns.de/css-grid-layout-2764.html
hypercharged flexibility, you basically can control everything
more of less code
... insert endless list of possibilites
hell complex and hard to manage
can I use? - for sure
https://css-tricks.com/snippets/css/complete-guide-grid/
resources
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout
https://gridbyexample.com/examples/
http://maddesigns.de/css-grid-layout-2764.html
css grids
By Tobias Hartmann
