Documentation

    Gridzilla is a responsive, mobile-first flexbox grid system that scales up to 12 units as the device or viewport size increases.

    To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. 

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Installation

    Install with npm

    You can install Gridzilla using npm: 

    $ npm install gridzilla

    Install with Bower

    You can also install Gridzilla using Bower: 

    $ bower install gridzilla-css

    Usage

    Once installed, you can use it as an importer in node-sass or any project that depends on node-sass.

    node-sass

    var sass = require('node-sass');
var gridzilla = require('gridzilla');

sass.render({
  file: './scss/styles.scss',
  importer: gridzilla
});

    gulp-sass

    var gulp = require('gulp');
var sass = require('gulp-sass');
var gridzilla = require('gridzilla');

gulp.task('sass', function() {
  return gulp.src('scss/**/*.scss')
    .pipe(sass({
      importer: gridzilla
    })
    .pipe(gulp.dest('./css'));
});

    grunt-sass

    module.exports = function(grunt) {
  var gridzilla = require('gridzilla');

  grunt.initConfig({
    sass:{
      options: {
        importer: gridzilla
      },
      ...
    }
  });
}

    webpack

    
  var webpack = require('webpack');
  var gridzilla = require('gridzilla');

  module.exports = function webpackConfig() {
    ...
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    },
    sassLoader: { // here you can pass node-sass configurations
      importer: gridzilla
    }
  };

}

    Once the importer is setup, you can import gridzilla CSS in your code. 

    @import 'gridzilla';

    If you prefer to avoid using grid classes in your markup, you can import the mixins only and include them as necessary. 

    @import 'gridzilla/mixins';

.my-custom-container {
  @include gz-make-container;
}

    Configuration

    Feature Gating and Customization

    Almost every feature in the grid can be turned on and off using Sass variables. You can enable/disable responsive classes for all features or for specific features.

    You can also customize settings like container widths, breakpoint values, breakpoint names, gaps between units and other settings.

    Prefixed Classes

    By default, all classes are not prefixed but if you want to use a prefix, simply update the $gz-namespace variable in the configuration file then compile. 

    $gz-namespace: "gz";

    You may then use all classes like so: 

    <div class="gz-grid">
  <div class="gz-unit-md-3 gz-align-top-xs">...</div>
  <div class="gz-unit-md-3 gz-stretch-xs">...</div>
</div>

    How it works

    In a nutshell, there are three major components: containers, grids, and units.

    Containers center your site's contents and help align your grid content.

    Grids are groups of units that ensure your units are lined up properly.

    Content should be placed within units, and only units may be immediate children of grids.

    Container

    Grid

    Unit
    Unit
    Unit

    Unit classes indicate the number of units you'd like to use out of the possible 12 per row. So if you want three equal-width units, you'd use .unit-sm-4.

    Example:
    <div class="container-lg">
  <div class="grid">
    <div class="unit-sm-4">One of three units</div>
    <div class="unit-sm-4">One of three units</div>
    <div class="unit-sm-4">One of three units</div>
  </div>
</div>

    You can also customize the total number of units per row by using the format .unit-{breakpoint}-{n}-{m} So if you want three equal-width units, you'd use .unit-sm-1-3.

    It's like saying: I want to use N units out of M units per this row.

    Example:
    <div class="container-lg">
  <div class="grid">
    <div class="unit-sm-1-3">One of three units</div>
    <div class="unit-sm-1-3">One of three units</div>
    <div class="unit-sm-1-3">One of three units</div>
  </div>
</div>

    The above examples create three equal-width units on small, medium, large, and extra large devices using the predefined grid classes. Those units are centered in the page with the parent .container-lg.

    Keep in mind:
    1. Unit widths are set in percentages, so they're always fluid and sized relative to their parent element.
    2. Units have horizontal padding to create the gaps between individual units.
    3. Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., .unit-sm-4 applies to small, medium, large, and extra large devices).

    Responsive breakpoints

    Extra small, Small, Medium, Large, and Extra large.

    Gridzilla uses the following media query ranges—or breakpoints—for the grid system. 

    // Extra small devices (portrait phones, less than 544px)
// No media query since this is the default breakpoint

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

    These breakpoints are based on minimum viewport widths and allows scaling up units as the viewport changes.

    Gridzilla uses a single mixin gz-media-and-larger but provides other useful mixins for handling media queries. 

    // For a specific media query range:
// @media (min-width: 768px) and (max-width: 991px) { ... }
@include gz-media-only(md) { ... }

// For a specific media query range and larger screen sizes:
// @media (min-width: 768px) { ... }
@include gz-media-and-larger(md) { ... }

// For a specific media query range and smaller screen sizes
// @media (max-width: 991px) { ... }
@include gz-media-and-smaller(md) { ... }

// Finally, to span multiple breakpoint widths:
// @media (min-width: 544px) and (max-width: 1199px) { ... }
@include gz-media-through(sm, lg) { ... }

    Containers

    Choose from fixed width and fluid width containers.

    Containers are required when using the grid system. Choose from a responsive fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).

    All containers have a maximum width of 100% and while containers can be nested, most layouts do not require a nested container.

    There are 5 types of fixed width containers available.

    Container type Container width across breakpoints
    Extra small <544px Small ≥544px Medium ≥768px Large ≥992px Extra large ≥1200px
    .container-xs 100%
    .container-sm 100%
    .container-md 100% 750px
    .container-lg 100% 750px 960px
    .container-xl 100% 750px 960px 1140px

    Usage

    Use .container-{type} for a fixed-width container that wraps your content. 

    <div class="container-lg">
  <!-- Content here -->
</div>

    Use .container-fluid for a full width container, spanning the entire width of the viewport. 

    <div class="container-fluid">
  <!-- Content here -->
</div>

    Unit Wrapping

    Create your grids with as many units as you want and they will automatically break into the next line.

    If more than the total number of units are placed within a single grid, each group of extra units will, as one unit, wrap onto a new line.

    Example:
    Unit
    Another Unit
    This should wrap onto a new line
    Subsequent units will continue along the new line
    <div class="grid">
  <div class="unit-md-4">Unit</div>
  <div class="unit-md-4">Another Unit</div>
  <div class="unit-md-5">This should wrap onto a new line</div>
  <div class="unit-md-6">Subsequent units will continue along the new line</div>
</div>

    No-Wrap

    To prevent this behavior, add .nowrap-{breakpoint} to .grid.

    Example:
    Unit
    Unit
    Another Unit
    This will not wrap onto a new line
    Subsequent units will continue along the same line
    <div class="grid nowrap-md">
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Another Unit</div>
  </div>
  <div class="unit-md-5">
    <div class="box">This will <em>not</em> wrap onto a new line</div>
  </div>
  <div class="unit-md-6">
    <div class="box">Subsequent units will continue along the <em>same</em> line</div>
  </div>
</div>

    Auto-layout Units

    Add any number of units you need and you're good to go

    To create a single grid of equal-width units, add any number of .unit-{breakpoint} and let the grid figure it out for you. For example, here are two grid layouts that apply to every device and viewport possible.

    Example 1:
    1
    2
    <div class="grid">
  <div class="unit-xs">1</div>
  <div class="unit-xs">2</div>
</div>
    Example 2:
    1
    2
    3
    4
    <div class="grid">
  <div class="unit-xs">1</div>
  <div class="unit-xs">2</div>
  <div class="unit-xs">3</div>
  <div class="unit-xs">4</div>
</div>

    Set width of any unit and other units will be automatically resized to fill the available space.

    Example:
    1
    2
    3
    4
    <div class="grid">
  <div class="unit-xs-1-2">
    <div class="box">1</div>
  </div>
  <div class="unit-xs">
    <div class="box">2</div>
  </div>
  <div class="unit-xs">
    <div class="box">3</div>
  </div>
  <div class="unit-xs">
    <div class="box">4</div>
  </div>
</div>

    Auto-layout Grid

    Create responsive grids of equal-width units with ease.

    If you want to create equal-width units without having to specify the width of each unit individually, add .auto-{breakpoint}-{unitsPerGrid} to .grid. You will need to add .unit-auto to each unit for proper styles and padding.

    Example 1:

    Automatic grid with 2 units per row.

    1
    2
    3
    4
    5
    6
    <div class="grid auto-md-2">
  <div class="unit-auto">1</div>
  <div class="unit-auto">2</div>
  ...
</div>
    Example 2:

    Automatic grid with 3 units per row.

    1
    2
    3
    4
    5
    6
    <div class="grid auto-md-3">
  <div class="unit-auto">1</div>
  <div class="unit-auto">2</div>
  <div class="unit-auto">3</div>
  ...
</div>

    Fit-Content Unit

    Create a unit that only takes the space it needs.

    If you want to make a unit take only as much width as it needs, use .fit-content-{breakpoint}. You may need to add .unit-auto to the unit for proper styles and padding.

    Example:
    Fit Content
    Unit
    Unit
    Unit
    <div class="grid">
  <div class="unit-md-1-4 fit-content-lg">
    <div class="box">Fit Content</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
</div>

    Units Order

    Change the display order of the units to keep a specific order in the source code.

    Offsets

    Move units to the right using .offset-{breakpoint}-{*} classes. These classes increase the left margin of a unit by * units. For example, .offset-md-4 moves the unit over four units.

    Example:
    Unit
    Offset by 25%
    Unit
    <div class="grid">
  <div class="unit-md-3">Unit</div>
  <div class="unit-md-3 offset-md-3">Offset by 25%</div>
  <div class="unit-md-3">Unit</div>
</div>

    This will also achieve the same result: 

    <div class="grid">
  <div class="unit-md-1-4">Unit</div>
  <div class="unit-md-1-4 offset-md-1-4">Offset by 25%</div>
  <div class="unit-md-1-4">Unit</div>
</div>

    You can override offsets from lower grid tiers with .offset-{breakpoint}-0 classes.

    Push and Pull

    Easily move units right and left with .push-{breakpoint}-{*} and .pull-{breakpoint}-{*} classes.

    Example:
    (1) Unit
    (2) Pushed by one third
    (3) Pulled by one third
    <div class="grid">
  <div class="unit-md-1-3">
    <div class="box">(1) Unit</div>
  </div>
  <div class="unit-md-1-3 push-md-1-3">
    <div class="box">(2) Pushed by one third</div>
  </div>
  <div class="unit-md-1-3 pull-md-1-3">
    <div class="box">(3) Pulled by one third</div>
  </div>
</div>

    You can override push and pull from lower grid tiers with .push-{breakpoint}-0 and .pull-{breakpoint}-0 classes.

    First and Last

    You can send a unit to the start of a grid using .first-{breakpoint} class.

    Example:
    1
    2
    3
    4
    <div class="grid">
  <div class="unit-md-1-4">
    <div class="box">1</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">2</div>
  </div>
  <div class="unit-md-1-4 first-md">
    <div class="box">3</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">4</div>
  </div>
</div>

    You can send a unit to the end of a grid using .last-{breakpoint} class.

    Example:
    1
    2
    3
    4
    <div class="grid">
  <div class="unit-md-1-4 last-md">
    <div class="box">1</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">2</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">3</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">4</div>
  </div>
</div>

    Reverse Order

    Reverse units order using .reverse-{breakpoint} class on .grid.

    Example:
    1
    2
    3
    4
    <div class="grid reverse-md">
  <div class="unit-md-1-4">
    <div class="box">1</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">2</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">3</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">4</div>
  </div>
</div>

    Nesting Units

    Easily extend your grid layout with nested units.

    To nest your content, add a new .grid and set of .unit-{breakpoint}-{*} units within an existing .unit-{breakpoint}-{*} unit.

    Example:
    Unit
    Unit
    Unit
    Unit
    Unit
    <div class="grid">
  <div class="unit-md-6">
    <div class="grid">
      <div class="unit-md-6">
        <div class="box">Unit</div>
      </div>
      <div class="unit-md-6">
        <div class="box">Unit</div>
      </div>
    </div>
  </div>

  <div class="unit-md-6">
    <div class="grid">
      <div class="unit-md-4">
        <div class="box">Unit</div>
      </div>
      <div class="unit-md-4">
        <div class="box">Unit</div>
      </div>
      <div class="unit-md-4">
        <div class="box">Unit</div>
      </div>
    </div>
  </div>
</div>

    Vertical Alignment

    Add classes to vertically align units to the top, middle or bottom of a grid.

    Add one of the alignment classes .align-top-{breakpoint}, .align-middle-{breakpoint} and .align-bottom-{breakpoint} to .grid to align units vertically.

    Use .align-top-{breakpoint} to vertically align units to the top.

    Example:
    Unit
    Unit
    Unit 
    <div class="grid align-top-md">
  <div class="unit-md-1-3">
    <div class="box" style="height: 60px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 120px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 40px;">Unit</div>
  </div>
</div>

    Use .align-middle-{breakpoint} to vertically align units to the middle.

    Example:
    Unit
    Unit
    Unit 
    <div class="grid align-middle-md">
  <div class="unit-md-1-3">
    <div class="box" style="height: 60px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 120px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 40px;">Unit</div>
  </div>
</div>

    Use .align-bottom-{breakpoint} to vertically align units to the bottom.

    Example:
    Unit
    Unit
    Unit 
    <div class="grid align-bottom-md">
  <div class="unit-md-1-3">
    <div class="box" style="height: 60px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 120px;">Unit</div>
  </div>
  <div class="unit-md-1-3">
    <div class="box" style="height: 40px;">Unit</div>
  </div>
</div>

    You can use the same classes on units as well.

    Example:
    Bottom
    Middle
    Top 
    <div class="grid" style="height: 120px;">
  <div class="unit-md-1-3 align-bottom-md">
    <div class="box">Bottom</div>
  </div>
  <div class="unit-md-1-3 align-middle-md">
    <div class="box">Middle</div>
  </div>
  <div class="unit-md-1-3 align-top-md">
    <div class="box">Top</div>
  </div>
</div>

    Horizontal Alignment

    Add classes to align units to the start, center or end of a grid.

    Add one of the alignment classes .align-start-{breakpoint}, .align-center-{breakpoint} and .align-end-{breakpoint} to .grid to align units horizontally.

    Use .align-start-{breakpoint} to horizontally align units to the start of a .grid.

    Example:
    Unit
    Unit 
    <div class="grid align-start-md">
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
</div>

    Use .align-center-{breakpoint} to horizontally align units to the center of a .grid.

    Example:
    Unit
    Unit 
    <div class="grid align-center-md">
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
</div>

    Use .align-end-{breakpoint} to horizontally align units to the end of a .grid.

    Example:
    Unit
    Unit 
    <div class="grid align-end-md">
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-1-4">
    <div class="box">Unit</div>
  </div>
</div>

    Units Distribution

    Add classes to justify units based on the space between (justify) them or the space around (spread) them.

    Use .justify-{breakpoint} to distribute space between units.

    Example:
    Unit
    Unit
    Unit
    <div class="grid justify-md">
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
</div>

    Use .spread-{breakpoint} to distribute space around units.

    Example:
    Unit
    Unit
    Unit
    <div class="grid spread-md">
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-3">
    <div class="box">Unit</div>
  </div>
</div>

    Equal-height Units

    Easily create matching height units.

    Create equal-height units using .stretch-{breakpoint} class.

    Example:
    Unit
    Unit
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. 
    <div class="grid stretch-md">
  <div class="unit-md-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-4">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md-4">
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus
      mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus
      a aperiam deserunt neque natus quisquam inventore, laudantium recusandae.
      Nobis, explicabo.
    </div>
  </div>
</div>

    You can use the same class to stretch individual units as well.

    Example:
    Will not stretch
    Will stretch
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. 
    <div class="grid">
  <div class="unit-md-4">
    <div class="box">Will <em>not</em> stretch</div>
  </div>
  <div class="unit-md-4 stretch-md">
    <div class="box">Will stretch</div>
  </div>
  <div class="unit-md-4">
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus
      mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus
      a aperiam deserunt neque natus quisquam inventore, laudantium recusandae.
      Nobis, explicabo.
    </div>
  </div>
</div>

    Gaps

    Add modifier classes to adjust gaps between units.

    Create gapless grids using .no-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    <div class="grid no-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
</div>

    Modify width of gaps using .{size}-gaps-{breakpoint} classes. Here is a full list of gaps modifier classes:

    • .smallest-gaps-{breakpoint}
    • .smaller-gaps-{breakpoint}
    • .small-gaps-{breakpoint}
    • .medium-gaps-{breakpoint}
    • .large-gaps-{breakpoint}
    • .larger-gaps-{breakpoint}
    • .largest-gaps-{breakpoint}

    Create 4px wide gaps using .smallest-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid smallest-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 10px wide gaps using .smaller-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid smaller-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 20px wide gaps using .small-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid small-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 30px wide gaps using .medium-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid medium-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 50px wide gaps using .large-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid large-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 80px wide gaps using .larger-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid larger-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Create 120px wide gaps using .largest-gaps-{breakpoint} class.

    Example:
    Unit
    Unit
    Unit
    Unit
    <div class="grid largest-gaps-md">
  <div class="unit-md">
    <div class="box">Unit</div>
  </div>
  ...
</div>

    Tiles Layout

    Build sophisticated layouts with ease.

    To create a group of tiles, wrap .grid in .tiles-{breakpoint}. You can use .vertical-{breakpoint} on .grid to stack units vertically.

    Example:

    Unit A

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Unit B

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Unit C

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. 

    <div class="tiles-md">
    <div class="grid">
      <div class="unit-md-6">
        <div class="tiles-md">
          <div class="grid vertical-md">
            <div class="unit-md">
              ...
            </div>
            <div class="unit-md">
              ...
            </div>
          </div>
        </div>
      </div>
      <div class="unit-md-6">
        ...
      </div>
    </div>
  </div>

    You can create more advanced layouts by nesting tiles.

    Example:

    Small Unit

    Lorem ipsum dolor sit amet.

    Small Unit

    Lorem ipsum dolor sit amet.

    Medium Unit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Wide Unit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Skyscraper Unit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo. 

    <div class="tiles-md">
  <div class="grid">
    <div class="unit-md-9">
      <div class="tiles-md">
        <div class="grid vertical-xs">
          <div class="unit-md">
            <div class="tiles-md">
              <div class="grid">
                <div class="unit-md-3">
                  <div class="tiles-md">
                    <div class="grid vertical-xs">
                      <div class="unit-md">
                        <!-- Small Unit -->
                      </div>
                      <div class="unit-md">
                        <!-- Small Unit -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="unit-md-9">
                  <!-- Medium Unit -->
                </div>
              </div>
            </div>
          </div>
          <div class="unit-md">
            <!-- Wide Unit -->
          </div>
        </div>
      </div>
    </div>
    <div class="unit-md-3">
      <!-- Skyscraper Unit -->
    </div>
  </div>
</div>

    Even more advanced layouts...

    Example:

    Unit A

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis..

    Unit B

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis..

    Unit C

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis..

    Unit D

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis..

    Unit E

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Unit F

    Lorem ipsum dolor sit amet.

    Unit G

    Lorem ipsum dolor sit amet.

    Unit H

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Unit I

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Unit J

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis..

    Unit K

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis quasi architecto expedita veritatis, doloremque, ducimus a aperiam deserunt neque natus quisquam inventore, laudantium recusandae. Nobis, explicabo.

    Unit L

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit non temporibus mollitia perferendis.. 

    <div class="tiles-md">
    <div class="grid vertical-md">
      <div class="unit-md">
        <div class="tiles-md">
          <div class="grid">
            <div class="unit-md">
              <!-- Unit A -->
            </div>

            <div class="unit-md">
              <!-- Unit B -->
            </div>

            <div class="unit-md">
              <!-- Unit C -->
            </div>

            <div class="unit-md">
              <!-- Unit D -->
            </div>
          </div>
        </div>
      </div>

      <div class="unit-md">
        <div class="tiles-md">
          <div class="grid">
            <div class="unit-md-9">
              <div class="tiles-md">
                <div class="grid vertical-md">
                  <div class="unit-md">
                    <div class="tiles-md">
                      <div class="grid">
                        <div class="unit-md-2-3">
                          <!-- Unit E -->
                        </div>

                        <div class="unit-md-1-3">
                          <div class="tiles-md">
                            <div class="grid vertical-md">
                              <div class="unit-md">
                                <!-- Unit F -->
                              </div>

                              <div class="unit-md">
                                <!-- Unit G -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="unit-md">
                    <!-- Unit H -->
                  </div>
                </div>
              </div>
            </div>

            <div class="unit-md-3">
              <!-- Unit I -->
            </div>
          </div>
        </div>
      </div>

      <div class="unit-md">
        <div class="tiles-md">
          <div class="grid">
            <div class="unit-md">
              <!-- Unit J -->
            </div>

            <div class="unit-md-6">
              <!-- Unit K -->
            </div>

            <div class="unit-md">
              <!-- Unit L -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    Made with

    by mostafa fouad