Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/Fluid-Grid.css

Last active December 31, 2015 06:59
Show Gist options
  • Save starryeyez024/7951177 to your computer and use it in GitHub Desktop.
Save starryeyez024/7951177 to your computer and use it in GitHub Desktop.
Download ZIP
FLUID GRIDS (great for Drupal views) For when your different items are output dynamically via a Drupal view or nodequeue, this handy mixin will help you turn them into a grid pretty quickly. The first mixin variable is how many columns you want your grid to be. The second variable is how many rows. If you are unsure how many rows, estimate a lit…
Raw
Fluid-Grid.css
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
}
body p {
margin: 3px 0;
}
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
overflow: hidden;
*zoom: 1;
}
.view-foobar .views-row .inner {
background: white;
padding: 5px;
}
.view-foobar .views-row .image-wrap {
position: relative;
height: 0;
padding-top: 75%;
width: 100%;
}
.view-foobar .views-row .image-wrap img {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
@media (max-width: 400px) {
.view-foobar .views-row {
float: left;
clear: both;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@media (min-width: 400px) and (max-width: 550px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 51%;
padding: 0 0 2% 2%;
}
.view-foobar .views-row-1 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-3 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -2%;
clear: both;
}
}
@media (min-width: 550px) and (max-width: 960px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 34%;
padding: 0 0 2% 2%;
}
.view-foobar .views-row-1 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-4 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-10 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -2%;
clear: both;
}
}
@media (min-width: 960px) and (max-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 25.25%;
padding: 0 0 1% 1%;
}
.view-foobar .views-row-1 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-17 {
margin-left: -1%;
clear: both;
}
}
@media (min-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 20.1%;
padding: 0 0 0.5% 0.5%;
}
.view-foobar .views-row-1 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-6 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-11 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-16 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-21 {
margin-left: -0.5%;
clear: both;
}
}
.container-x .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container-x .panel-pane {
width: 25.5%;
padding: 0 0 2% 2%;
}
.container-x .panel-pane-1 {
margin-left: -2%;
clear: both;
}
.container-x .panel-pane-5 {
margin-left: -2%;
clear: both;
}
Raw
Fluid-Grid.haml
.view-foobar
.views-row.views-row-1
.inner
.image-wrap
%img(src="http://placekitten.com/400/300")
%p I love responsive design
.views-row.views-row-2
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Try scaling the window...
.views-row.views-row-3
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Sassmeister is responsive too!
.views-row.views-row-4
.inner
.image-wrap
%img(src="http://placekitten.com/400/300")
%p Kittens <3 RWD.
.views-row.views-row-5
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Wow this is sweet!
.views-row.views-row-6
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-7
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-8
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Wow this is sweet!
.views-row.views-row-9
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
.views-row.views-row-10
.inner
.image-wrap
%img(src="http://placekitten.com/1200/900")
%p Wow this is cool!
.views-row.views-row-11
.inner
.image-wrap
%img(src="http://placekitten.com/800/600")
%p Wow this is sweet!
.views-row.views-row-12
.inner
.image-wrap
%img(src="http://placekitten.com/2000/1500")
%p Wow this is awesome!
Raw
Fluid-Grid.html
<div class='view-foobar'>
<div class='views-row views-row-1'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/400/300'>
</div>
<p>I love responsive design</p>
</div>
</div>
<div class='views-row views-row-2'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Try scaling the window...</p>
</div>
</div>
<div class='views-row views-row-3'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Sassmeister is responsive too!</p>
</div>
</div>
<div class='views-row views-row-4'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/400/300'>
</div>
<p>Kittens <3 RWD.</p>
</div>
</div>
<div class='views-row views-row-5'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-6'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-7'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-8'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-9'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-10'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-11'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
</div>
Raw
Fluid-Grid.sass
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Toolkit (v2.6.0)
// ----
@import "compass"
@import "toolkit"
@import "breakpoint"
////////////////////////////////////////////////////
// FLUID GRID COLUMNS http://sassmeister.com/gist/7951177
///////////////////////////////////////////////////
$fluid-grid-cols: 1
$fluid-grid-grid-rows: 10
$fluid-grid-padding: 2%
$fluid-grid-class-name: views-row
@mixin grid-mobile($class-name: $fluid-grid-class-name)
.#{$class-name}
float: left
clear: both
width: 100%
+box-sizing('border-box')
@mixin grid-desktop($class-name: $fluid-grid-class-name)
.#{$class-name}
float: left
clear: none
+box-sizing('border-box')
@mixin fluid-grid($cols: $fluid-grid-cols, $grid-rows: $fluid-grid-grid-rows, $padding: $fluid-grid-padding, $class-name: $fluid-grid-class-name)
.#{$class-name}
width: (100% + $padding) / $cols
padding: 0 0 $padding $padding
@for $x from 1 through $grid-rows
.#{$class-name}-#{$x * $cols - ($cols - 1)}
margin-left: -($padding)
clear: both
// When using the fluid grid mixin, plug in the following variables:
// the number of columns
// the number of rows (if you are unsure guess and add 1 or 2)
// the padding for the left & right edge of each row
// and the name of the class for the rows themselves.
// Use the grid-mobile mixin for mobile, and then add a breakpoint
// and use the grid-desktop mixin for columns 2 and up.
// =================================================================
// EXAMPLE 1
.view-foobar
max-width: 90%
margin: 0 auto
background: #f1f1f1
overflow: hidden
@include has-layout
.views-row
.inner
background: white // likely you wouldn't want to add this, I've added a background so you can see this div
padding: 5px
.image-wrap
+intrinsic-ratio(4/3, $elements: img)
+breakpoint(max-width 400px)
+grid-mobile
+breakpoint(400px 550px)
+grid-desktop
+fluid-grid(2) // two columns
+breakpoint(550px 960px)
+grid-desktop
+fluid-grid(3) // three columns
+breakpoint(960px 1200px)
+grid-desktop
+fluid-grid(4, $padding: 1%) // four columns
+breakpoint(1200px)
+grid-desktop
+fluid-grid(5, $padding: 0.5%) // five columns
// EXAMPLE 2
// the default class name is "views-row" but you may replace
// that with the last variable.
.container-x
+grid-desktop
+fluid-grid(4, 2, $class-name: panel-pane)
// Styles for niceness
body
font-family: "Open Sans", "Helvetica", "Arial", sans-serif
background: #ddd
color: #222
p
margin: 3px 0
img
max-width: 100%
*, *:before, *:after
box-sizing: border-box
Raw
SassMeister-output.css
.view-foobar {
max-width: 90%;
margin: 0 auto;
background: #f1f1f1;
overflow: hidden;
*zoom: 1;
}
.view-foobar .views-row .inner {
background: white;
padding: 5px;
}
.view-foobar .views-row .image-wrap {
position: relative;
height: 0;
padding-top: 75%;
width: 100%;
}
.view-foobar .views-row .image-wrap img {
display: block;
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0;
margin: 0;
padding: 0;
}
@media (max-width: 400px) {
.view-foobar .views-row {
float: left;
clear: both;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@media (min-width: 400px) and (max-width: 550px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 51%;
padding: 0 0 2% 2%;
}
.view-foobar .views-row-1 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-3 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-11 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-15 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-17 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-19 {
margin-left: -2%;
clear: both;
}
}
@media (min-width: 550px) and (max-width: 960px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 34%;
padding: 0 0 2% 2%;
}
.view-foobar .views-row-1 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-4 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-7 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-10 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-16 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-19 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-22 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-25 {
margin-left: -2%;
clear: both;
}
.view-foobar .views-row-28 {
margin-left: -2%;
clear: both;
}
}
@media (min-width: 960px) and (max-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 25.25%;
padding: 0 0 1% 1%;
}
.view-foobar .views-row-1 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-5 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-9 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-13 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-17 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-21 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-25 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-29 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-33 {
margin-left: -1%;
clear: both;
}
.view-foobar .views-row-37 {
margin-left: -1%;
clear: both;
}
}
@media (min-width: 1200px) {
.view-foobar .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.view-foobar .views-row {
width: 20.1%;
padding: 0 0 0.5% 0.5%;
}
.view-foobar .views-row-1 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-6 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-11 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-16 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-21 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-26 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-31 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-36 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-41 {
margin-left: -0.5%;
clear: both;
}
.view-foobar .views-row-46 {
margin-left: -0.5%;
clear: both;
}
}
.container-x .views-row {
float: left;
clear: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container-x .panel-pane {
width: 25.5%;
padding: 0 0 2% 2%;
}
.container-x .panel-pane-1 {
margin-left: -2%;
clear: both;
}
.container-x .panel-pane-5 {
margin-left: -2%;
clear: both;
}
body {
font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
background: #dddddd;
color: #222222;
}
body p {
margin: 3px 0;
}
body img {
max-width: 100%;
}
*, *:before, *:after {
box-sizing: border-box;
}
Raw
SassMeister-rendered.html
<div class='view-foobar'>
<div class='views-row views-row-1'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/400/300'>
</div>
<p>I love responsive design</p>
</div>
</div>
<div class='views-row views-row-2'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Try scaling the window...</p>
</div>
</div>
<div class='views-row views-row-3'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Sassmeister is responsive too!</p>
</div>
</div>
<div class='views-row views-row-4'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/400/300'>
</div>
<p>Kittens <3 RWD.</p>
</div>
</div>
<div class='views-row views-row-5'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-6'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-7'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-8'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-9'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
<div class='views-row views-row-10'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/1200/900'>
</div>
<p>Wow this is cool!</p>
</div>
</div>
<div class='views-row views-row-11'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/800/600'>
</div>
<p>Wow this is sweet!</p>
</div>
</div>
<div class='views-row views-row-12'>
<div class='inner'>
<div class='image-wrap'>
<img src='http://placekitten.com/2000/1500'>
</div>
<p>Wow this is awesome!</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment