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
- 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.)
- If you do need more than a 4 × 4 grid, then change the
- 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.
- If you need a grid layout on devices smaller than 48rem viewport width, then you can un-comment
- Per grid-item justification and alignment.
- RTL and LTR languages are supported.
- No need for any of that offseting, push-pulling and re-ordering stuff that you’re used to, from float and flexbox grids.
- Three dimensions — because grid items can overlap.
- 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:
- Use
.grid
(and.grid--gap
) classes to instantiate your grid - Place your items on the grid, according to their start and end tracks for
col-md--*
androw-md--*
- Optional: Modify (2.) for the large breakpoint, using
-lg--
- 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
Article
<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>