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

• .grid
• .grid--gap

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

• Column tracking — multiple permutations, e.g.:
  • .col-md--1-3 item starts column track 1 and ends column track 3 = spans columns 1 & 2.
  • .col-md--3-4 item starts column track 3 and ends column track 4 = spans column 4 only.
  
  
• Row tracking — multiple permutations, e.g.:
  • .row-md--1-2 item starts row track 1 and ends row track 2 = spans row 1 only.
  • .row-md--2-4 item starts row track 2 and ends row track 4 = spans rows 2 & 3.
  
  
• Justification (horizontal) — within grid area:
  • .justify-md--left
  • .justify-md--right
  • .justify-md--center
  • .justify-md--stretch (default; you only need this if you unstretched it at a smaller viewport width)
  
  
• Alignment (vertical) — within grid area:
  • .align-md--top
  • .align-md--bottom
  • .align-md--center
  • .align-md--stretch (default; you only need this if you unstretched it at a smaller viewport width)

Responsive (viewport width) modifiers

• Viewport widths 48rem up:
  • col-md--
  • row-md--
  • justify-md--
  • align-md--
  
  
• Viewport widths 64rem up:
  • col-lg--
  • row-lg--
  • justify-lg--
  • align-lg--

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.

<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.

<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.

<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 full width on small viewports
  
  
• Sidebar nav
  • as full width block (below header) on small viewports
  • left 1/4 width on medium viewports
  • right 1/4 width on large viewports
  
  
• Main article
  • as full width block on small viewports
  • right 3/4 width on medium viewports
  • left 3/4 width on large viewports
  
  
• Three nested items (within main article)
  • stacked on small viewports
  • in a row on medium viewports up
  
  
• Footer full width but centered on all viewports

<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>