Gridder's fluid grid and breakpoints enable endless combinations of column sizes, offsets, allignments and viewport widths.
Download Gridder Visit GithubFirst, make sure to wrap your columns in a row element. Then specify your columns and stick your content inside. Use the following classes to identify your coloumns: tiny-* small-* medium-* large-*
* is a number between 1 and 12, where 1 is a single column.
<div class="row">
<div class="tiny-12">
This spans 12/12 columns on all screensizes
</div>
</div>
<div class="row">
<div class="medium-6">
This spans 6/12 columns on screens wider then
the medium breakpoint, but will span 12/12 on smaller screens
</div>
</div>
<div class="row">
<div class="small-12 medium-6 large-4">
This spans 12/12 columns on small screens,
6/12 on medium screens and 4/4 on large screens
</div>
</div>
Simply download gridder and add it to your head, like this:
// index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="path/to/gridder.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
Remember to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head aswell, to make sure the site scales correctly
Gridder is also available through this jsdelivr:
https://cdn.jsdelivr.net/npm/[email protected]/gridder.min.css
You can also add Gridder with NPM:
npm install gridder-css
Gridder works in all modern browsers. IE10+ Edge Firefox Chrome Safari Opera
Were currently working on a new version of gridder built entirely on CSS Grid Layout. This build, however, will remain experimental untill the it is fully supported in all major browser
The short answer... YES!
Gridder is built to be scalable, and thus works for small, aswell as large projects. There's been some controversy about the speed of flexbox when used for pagelayouts, but this has been debunked
With that said, Gridder excels in small to mid-sized projects, largly because of it's easy of use and setup.