A simple Grid System using Flex Box

A simple Grid System using Flex Box.markdown

A simple Grid System using Flex Box

Using CSS flex to create a simple grid system

Forked from Roshan's Pen A simple Grid System using Flex Box.

A Pen by dimabelogurov on CodePen.

License.

index.html

<header class="top-nav">
  <div class="row">
    <a href="#" class="brand col">
    Site Name
  </a>
    <nav class="col">
      <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolar</a></li>
      </ul>
    </nav>
  </div>
</header>
<section class="hero">
  <article>
    <h1>A simple 12 grid system using Flex Boxes</h1>
    <p>by <em>Roshan Ravi</em></p>
  </article>
</section>
<main>
  <section class="blog row border-top border-bottom">
    <article class="content col-6">
      <h2>Grids in Action</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue purus non turpis vulputate mollis. Duis sit amet neque risus. Etiam vitae pulvinar enim, ac congue elit. Praesent in pretium ante, id aliquet mauris. Ut nec justo orci. Nullam vel
        tellus mi. Nulla tincidunt tincidunt nisi sit amet posuere. Praesent pellentesque mauris sed dictum ultricies. Pellentesque rhoncus nunc at consectetur fringilla. Curabitur sit amet tempus elit, sit amet auctor felis.
      </p>
      <p>
        Quisque tincidunt, justo eget accumsan tempus, risus nisl tincidunt nisi, nec feugiat lectus mi vel neque. Proin mattis neque quis nunc consequat pretium. Etiam porttitor consequat diam id congue. Aliquam lectus erat, pellentesque sed sodales a, luctus
        eu enim. Suspendisse magna lorem, ullamcorper vitae varius in, cursus a dui. In sed mauris quam. Quisque nec libero sed metus elementum pulvinar. Phasellus dictum, lacus sed tempus bibendum, dolor arcu commodo enim, vestibulum rutrum tellus tortor
        vel sapien. Nullam nec lacus id sapien gravida sagittis. Phasellus tincidunt lorem sit amet arcu vulputate, nec venenatis nisl tincidunt. Sed id sapien in odio vulputate aliquet. Aliquam eget diam a arcu imperdiet mollis.
      </p>
      <p>
        Praesent pulvinar tellus sit amet pellentesque bibendum. Nullam malesuada accumsan leo, id mattis dui suscipit non. Etiam vitae viverra orci. In non elementum libero, vitae rutrum felis. Nunc vulputate metus id dapibus feugiat. Nunc vel vestibulum odio,
        vitae commodo orci. Duis dui urna, pharetra nec risus sit amet, bibendum eleifend nisi. Proin tempus maximus dignissim.
      </p>
      <p>
        Fusce vestibulum dolor a justo tincidunt, quis efficitur ante lacinia. Aliquam at magna at magna cursus pulvinar. Proin pharetra congue tincidunt. Maecenas tincidunt et nibh vel egestas. Cras eget nisi felis. Nunc at pellentesque neque, quis ornare massa.
        Proin fringilla aliquam lacus, eget mollis diam bibendum sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum posuere felis arcu, eget mollis leo scelerisque non.
      </p>
      <p>
        Morbi non volutpat urna. Curabitur aliquet laoreet eros, ac bibendum sapien tristique sed. Sed luctus urna ante, sed accumsan eros auctor ut. Nulla facilisi. Ut maximus tristique nisl. Curabitur est lorem, viverra non lobortis eget, convallis in augue.
        Sed tincidunt suscipit est eget posuere. Aenean imperdiet euismod sagittis. Nam ullamcorper, ligula ut congue blandit, elit lorem cursus leo, et suscipit justo enim in lacus. Integer et fringilla nibh. Integer quis nisl id arcu luctus porta ut
        non magna. Aenean malesuada bibendum consectetur.
      </p>
    </article>
    <div class="sidebar col-4 border-left border-right">
      <article>
        <h2>Sidebar Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue purus non turpis vulputate mollis. Duis sit amet neque risus. Etiam vitae pulvinar enim, ac congue elit. Praesent in pretium ante, id aliquet mauris. Ut nec justo orci. Nullam
          vel tellus mi. Nulla tincidunt tincidunt nisi sit amet posuere. Praesent pellentesque mauris sed dictum ultricies. Pellentesque rhoncus nunc at consectetur fringilla. Curabitur sit amet tempus elit, sit amet auctor felis.</p>
      </article>

      <article>
        <h2>Sidebar Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue purus non turpis vulputate mollis. Duis sit amet neque risus. Etiam vitae pulvinar enim, ac congue elit. Praesent in pretium ante, id aliquet mauris. Ut nec justo orci. Nullam
          vel tellus mi. Nulla tincidunt tincidunt nisi sit amet posuere. Praesent pellentesque mauris sed dictum ultricies. Pellentesque rhoncus nunc at consectetur fringilla. Curabitur sit amet tempus elit, sit amet auctor felis.</p>
      </article>

      <article>
        <h2>Sidebar Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue purus non turpis vulputate mollis. Duis sit amet neque risus. Etiam vitae pulvinar enim, ac congue elit. Praesent in pretium ante, id aliquet mauris. Ut nec justo orci. Nullam
          vel tellus mi. Nulla tincidunt tincidunt nisi sit amet posuere. Praesent pellentesque mauris sed dictum ultricies. Pellentesque rhoncus nunc at consectetur fringilla. Curabitur sit amet tempus elit, sit amet auctor felis.</p>
      </article>
    </div>
    <div class="sidebar col-2">

      <article>
        <h3>Sidebar Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue purus non turpis vulputate mollis. Duis sit amet neque risus. Etiam vitae pulvinar enim, ac congue elit. Praesent in pretium ante, id aliquet mauris. Ut nec justo orci. Nullam
        </p>
      </article>

      <article>
        <h3>Sidebar Title</h3>
        <p>
          Vel tellus mi. Nulla tincidunt tincidunt nisi sit amet posuere. Praesent pellentesque mauris sed dictum ultricies. Pellentesque rhoncus nunc at consectetur fringilla. Curabitur sit amet tempus elit, sit amet auctor felis.</p>
      </article>
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-1">
      .col-1
    </div>
    <div class="col-11">
      .col-11
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-2">
      .col-2
    </div>
    <div class="col-10">
      .col-10
    </div>
  </section>
  <section class="grid-preview row">
    <div class="col-3">
      .col-3
    </div>
    <div class="col-9">
      .col-9
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-4">
      <h2>Form Elements</h2>
      <form action="#">
        <div class="input-wrap">
          <label for="name">Text Input:</label>
          <input type="text" name="name" id="name" placeholder="John Smith" />
        </div>

        <fieldset>
          <legend>Radio Button Choice</legend>

          <label for="radio-choice-1">Choice 1</label>
          <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

          <label for="radio-choice-2">Choice 2</label>
          <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
        </fieldset>

        <div class="input-wrap">
          <label for="select-choice">Select Dropdown Choice:</label>
          <select name="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
          </select>
        </div>

        <div class="input-wrap">
          <label for="textarea">Textarea:</label>
          <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        </div>

        <div class="input-wrap">
          <label for="checkbox">Checkbox:</label>
          <input type="checkbox" name="checkbox" id="checkbox" />
        </div>

        <div class="input-wrap">
          <input type="submit" value="Submit" />
        </div>
      </form>
    </div>
    <div class="col-8">
      .col-8
    </div>
  </section>


  <section class="grid-preview row">
    <div class="col-5">
      .col-5
    </div>
    <div class="col-7">
      .col-7
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-6">
      .col-6
    </div>
    <div class="col-6">
      .col-6
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-7">
      .col-7
    </div>
    <div class="col-5">
      .col-5
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-8">
      .col-8
    </div>
    <div class="col-4">
      .col-4
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-9">
      .col-9
    </div>
    <div class="col-3">
      .col-3
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-10">
      .col-10
    </div>
    <div class="col-2">
      .col-2
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-11">
      .col-11
    </div>
    <div class="col-1">
      .col-1
    </div>
  </section>


  <section class="grid-preview row">
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
    <div class="col-1">.col-1 (12 equal columns) </div>
  </section>

  <section class="grid-preview row">
    <div class="col-1">
      .col-1
    </div>
    <div class="col-2">
      .col-2
    </div>
    <div class="col-4">
      .col-3
    </div>
    <div class="col-5">
      .col-5
    </div>
  </section>

  <section class="grid-preview row">
    <div class="col-3">
      <div class="row">
        <article class="col-4">
          col-4
        </article>
        <article class="col-4">
          col-4
        </article>
        <article class="col-4">
          col-4
        </article>
      </div>
    </div>

    <div class="col-4">
      <div class="row">
        <article class="col-3">
          .col-3
        </article>
        <article class="col-3">
          .col-3
        </article>
        <article class="col-3">
          .col-3
        </article>
        <article class="col-3">
          .col-3
        </article>

      </div>
    </div>

    <div class="col-5">
      <div class="row">
        <article class="col-3">
          .col-3
        </article>
        <article class="col-4">
          .col-4
        </article>
        <article class="col-5">
          .col-5
        </article>
      </div>
    </div>

  </section>
</main>

style.css

$col-count: 12
$col-margin: 0
$col-padding: 16px
$sans-serif: "Roboto", Helvetica, sans-serif
$serif: "Lora", serif
$brand-color: #db5051
$accent-color: #75649b
$dark-grey: #3d3c46
$light-grey: #999999
$border-color: #edebe6
$input-border: #cccccc
$input-radius: 4px
$nav-height: 80px
$field-margin: 1rem
$small-screens: "only screen and (max-width : 900px)"
$mid-screens: "only screen and (min-width : 901px) and (max-width: 1024px)"
$large-screens: "only screen and (min-width : 1025px) and (max-width: 1280px)"

=textBox
  font-family: $sans-serif
  font-size: 0.9rem
  display: inline-block
  width: 100%
  border: solid 1px $input-border
  outline: none
  box-sizing: border-box
  padding: 0.6rem
  box-shadow: none
  border-radius: $input-radius
  &:focus
    border: solid 1px #aaa

/* = Grid Starts here */
$col-slug: col !default

@for $i from 1 through $col-count
  .#{$col-slug}-#{$i}
    width: 8.332% * $i

.row
  display: flex
  flex-direction: row
  justify-content: space-between
  width: 100%
  [class*="col-"]
    box-sizing: border-box
    margin: 0 $col-margin
    padding: $col-padding
/* Grid Ends */

/* = below code is only for the demo purpose */
html
  background: white
  font-size: 1rem

body
  font-family: $sans-serif
  display: block
  background: white
  margin: 0 auto
  padding-top: $nav-height
  line-height: 1.45

h1,h2,h3,h4
  margin-top: 0

h1
  color: $brand-color
  font-size: 2.441rem
  font-family: $serif
  font-weight: 700

h2
  font-size: 1.953rem
  color: $accent-color
  font-family: $serif

h4
  font-size: 1.25rem

h3
  font-size: 1.563rem
  color: $dark-grey
  text-transform: uppercase

p
  font-size: 1rem
  margin-bottom: 1.3rem
  color: #666666

a
  color: $brand-color
  font-weight: bold
  text-decoration: none

.top-nav
  height: $nav-height
  position: fixed
  left: 0
  right: 0
  top: 0
  border-bottom: solid 1px $border-color
  z-index: 99
  background: white
  padding: 0 2rem
  .brand, ul li a
    height: $nav-height
    line-height: $nav-height
  ul
    display: block
    text-align: right
    list-style: none
    padding: 0
    margin: 0
    li
      display: inline-block
      a
        display: inline-block
        padding: 0 2rem
        color: black
        &:hover
          color: $brand-color

.hero
  height: 50vh
  padding: 20vh 0
  text-align: center
  display: flex
  align-items: center
  justify-content: center
  position: relative
  background: $dark-grey
  &:after
    content: ""
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index: 1
    background: url("https://images.unsplash.com/photo-1438755582627-221038b62986?q=80&fm=jpg&s=ce1a984f1ac11887a5d5569ebbce53fb") no-repeat
    opacity: 0.5
    background-size: 100% auto
  >article
    position: relative
    z-index: 2
    p, h1
      color: white
    

/* = Borders */
.border
  border: solid 1px $border-color

.border-left
  border-left: solid 1px $border-color

.border-right
  border-right: solid 1px $border-color

.border-top
  border-top: solid 1px $border-color

.border-bottom
  border-bottom: solid 1px $border-color

/* = Grid ends here */

/* = UI Components */

/*Forms */

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]),
textarea
  +textBox

.input-wrap, fieldset
  margin-bottom: $field-margin

fieldset
  border: solid 1px $border-color
  padding: 0.6rem
  legend
    font-size: 0.8rem
    color: $light-grey

select
  +textBox
  height: 2.5rem
  background: #fff

label
  font-size: 1rem

@media #{$small-screens}
  main [class*='col-']
    border: solid 1px $border-color
  .top-nav
    position: fixed
    nav.col
      position: absolute
      width: 40px
      height: 3px
      display: block
      right: 2em
      top: 37px
      background: black
      ul
        position: fixed
        left: 0
        right: 0
        height: 0
        overflow: hidden
        top: $nav-height
      &:after,
      &:before
        content: ""
        display: block
        width: 40px
        height: 3px
        background: black
        position: absolute
        left: 0
      &:before
        top: -8px
      &:after
        bottom: -8px
  .row
    flex-direction: column
    [class*='col']
      flex: 1
      width: 100%
    &[class*='border']
      border: solid 1px $border-color

@media #{$mid-screens}
  body
    width: 900px

@media #{$large-screens}
  body
    width: 100%

.sidebar
  font-size: 85%
  >article
    border-bottom: solid 1px $border-color
    padding: 1em
    &:last-of-type
      border: none

.grid-preview
  padding: 3em 0
  background: #fafafa
  border-bottom: solid 1px $border-color
  [class*='col']
    border-color: #cccccc
    font-size: 80%
    border: solid 1px $border-color
    background: #fff

styles

<link href="https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Roboto:400,300,400italic,700,900)" rel="stylesheet" />