A real three-dimensional CSS Grid grid-system

https://github.com/SimonPadbury/real-3d-css-grid

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Use css-grid-system.scss to generate a real three-dimensional CSS Grid grid-system.

Features

  1. Unlike the traditional (columnar) 12 column grid systems, here you get to choose how many columns and rows you need for your layout: 1,2,3, or 4 (max). That covers almost everything you would ever want to do.
    • If you do need more than a 4 × 4 grid, then change the $grid--max-cols and $grid--max-rows variables. (Warning: don’t go too high here, because this could massively increase your outputted CSS.)
  2. The grid layout kicks in at minimum 48rem (768px) by default. Phones in portrait orientation get a single-column layout.
    • If you need a grid layout on devices smaller than 48rem viewport width, then you can un-comment @include grid--tiny in the class-builder SCSS.
  3. Per grid-item justification and alignment.
  4. RTL and LTR languages are supported.
  5. No need for any of that offseting, push-pulling and re-ordering stuff that you’re used to, from float and flexbox grids.
  6. Three dimensions — because grid items can overlap.
  7. All this in only 3kb minified CSS.

Grid system

Grid Classes

That’s it. There’s no need for establishing the grid’s number of columns and rows — because the browser’s CSS grid engine can figure it out.

However, in rare cases you may run into difficulties with highly complex layouts that have empty and/or overlapping grid cells. But even then, this project has you covered: un-comment the @include grid--setup in the class-builder, pre-process away, and then understand the example in the SCSS.

Grid-item Classes

Responsive (viewport width) modifiers

Usage

Here’s what you actually do:

  1. Use .grid (and .grid--gap) classes to instantiate your grid
  2. Place your items on the grid, according to their start and end tracks for col-md--* and row-md--*
  3. Optional: Modify (2.) for the large breakpoint, using -lg--
  4. Optional: set item justification and alignment within its grid area

Examples

Simple

This grid will have 3 columns. The 6 grid items will wrap over 2 rows.

First grid item
Second grid item
Third grid item
Fourth grid item
Fifth grid item
sixth grid item
<div class="grid grid-md--h3">
  <div>First grid item</div>
  <div>Second grid item</div>
  <div>Third grid item</div>
  <div>Fourth grid item</div>
  <div>Fifth grid item</div>
  <div>sixth grid item</div>
</div>

Row spanning

2 columns and 3 rows. The first column will be occupied by the first grid item for its full height (spanning 3 rows). The second grid column will have 3 items on 3 rows.

First grid item
Second grid item
Third grid item
Fourth grid item
<div class="grid grid--gap">
  <div class="col-md--1-2 row-md--1-4">First grid item</div>
  <div class="col-md--2-3 row-md--1-2">Second grid item</div>
  <div class="col-md--2-3 row-md--2-3">Third grid item</div>
  <div class="col-md--2-3 row-md--3-4">Fourth grid item</div>
</div>

Easy Layout

Full width header and footer. Main section left 2/3 width. Sidebar 1/3 width.

Header
Main article
Sidebar
Footer
<div class="grid">
  <header class="col-md--1-4">Header</header>
  <main class="col-md--1-3">Main article</main>
  <div class="col-md--3-4">Sidebar</div>
  <footer class="col-md--1-4">Footer</footer>
</div>

Complex Layout (viewport widths 48rem up) — exemplifying grid nesting, column re-ordering and center-justifying:

Header
Sidebar nav

Article

Nested
Nested
Nested
Footer
<div class="grid grid--gap">
  <header class="col--1-2 col-md--1-5 justify--center justify-md--left row--1-2">Header</header>
  <div class="col--1-2 col-lg--4-5 row-md--2-3">Sidebar nav</div>
  <main class="col--1-2 col-md--2-5 col-lg--1-4 row-md--2-3">
    <h1>Article</h1>
    <section class="grid grid--gap">
      <div class="col-md--1-2">Nested</div>
      <div class="col-md--2-3">Nested</div>
      <div class="col-md--3-4">Nested</div>
    </section>
  </main>
  <footer class="col--1-2 col-md--1-5 justify--center">Footer</footer>
</div>