Z-Grid Example

Here you'll find some examples on how Z-Grid works.

HTML

<link rel="stylesheet" href="z-grid/dist/z-grid.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/zoopit/z-grid/master/dist/z-grid.min.css">
<h1>Z-Grid</h1>
<h5>A simple CSS flexible grid inspired(ish) by flexbox model using the calc() function.</h5>
<div class="z-grid-row">
  <h3>Columns only</h3>
  <section class="z-grid-column color-eee">
    <h4>Column A</h4>
  </section>
  <section class="z-grid-column color-aaa">
    <h4>Column B</h4>
  </section>
  <section class="z-grid-column color-666">
    <h4>Column C</h4>
  </section>
  <section class="z-grid-column color-333">
    <h4>Column D</h4>
  </section>
  <section class="z-grid-column color-000">
    <h4>Column E</h4>
  </section>
</div>
<div class="z-grid-row">
  <h3>Percentage columns</h3>
  <section class="z-grid-column colflex-60p color-eee">
    <h4>Column 60%</h4>
  </section>
  <section class="z-grid-column colflex-40p color-aaa">
    <h4>Column 40%</h4>
    <div class="z-grid-column colflex-50p color-666">Nested column 50%</div>
    <div class="z-grid-column colflex-50p color-333">Nested column 50%</div>
  </section>
</div>
<div class="z-grid-row">
  <h3>Flexible and fixed width columns</h3>
  <section class="z-grid-column colfix-2c color-eee">
    <h4>Fixed width column</h4>
    <p>2 columns</p>
  </section>
  <section class="z-grid-column colflex-shrink-4c color-aaa">
    <h4>Flexible width column</h4>
    <p>Fills the width of 4 columns</p>
    <div class="z-grid-column colfix-1c color-333"></div>
    <div class="z-grid-column colflex-shrink-2c color-666"></div>
    <div class="z-grid-column colfix-1c color-eee"></div>
  </section>
  <section class="z-grid-column colfix-2c color-666">
    <h4>Fixed width column</h4>
    <p>2 columns</p>
  </section>
</div>
<div class="z-grid-row">
  <h3>Flexible and fixed width columns 2</h3>
  <section class="z-grid-column colflex-shrink-4c color-aaa">
    <h4>Flexible width column</h4>
    <p>Fills the width of 4 columns</p>
    <div...

CSS

html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, Helvetica, Arial, sans-serif;
}

body {
  margin: 40px;
}

.z-grid-column {
  padding: 20px;
}

.color-eee {
  background: #eee;
}

.color-aaa {
  background: #aaa;
}

.color-666 {
  background: #666;
  color: #fff
}

.color-333 {
  background: #333;
  color: #fff
}

.color-000 {
  background: #000;
  color: #fff
}