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

css grids

  • 24
Loading comments...

More from Tobias Hartmann