A Pen by exarcheia-web.

3-Grid-Layout-Techniques.markdown

3 Grid Layout Techniques

A Pen by exarcheia-web on CodePen.

License.

index.html

<div class="container">
  <header class="site-header">Header</header>
  <section class="section-main">
    <div class="box">Column 1</div>
    <div class="box">Column 2</div>
    <div class="box">Column 3</div>
  </section>
  <footer class="site-footer">Footer</footer>
</div>

style.css

/* RESET */

* {
  box-sizing: border-box;
}

/* BASIC SETUP */

.container {
  width:      900px;
  margin:     0 auto;
  background: #fecbcb;
}

.site-header, .box, .site-footer {
  background:     #999;
}

.site-header, .site-footer {
  min-height:     150px;
  margin-bottom:  1px;
}

.box {
  width:          300px;
  min-height:     350px;
  margin-bottom:  1px;
  border-right:   1px solid #fecbcb;
}

.box:last-of-type {
  border-right:   none;
}

/* GRID CSS */

/* INLINE-BLOCK TECHNIQUE:

.box {
  display:          inline-block;
  vertical-align:   top;
  margin-right:     -4px;
}

/* TABLES TECHNIQUE:

.section-main {
  display:         table;
  border-collapse: collapse;
}

.box {
  display:          table-cell;
  vertical-align:   top;
  border-bottom:    1px solid #fecbcb;
}

/* FLOATS TECHNIQUE: */

.section-main:before, .section-main:after {
  content: " ";
  display: table;
}

.section-main:after {
  clear: both;
}

.box {
  float: left;
}