A dead-simple, bare bones responsive grid to help you get your layouts looking sharp quickly. It only cares about laying out your content, so you can style your websites and applications however you like, without having to worry about creating a custom grid system.
Flexgrid is a responsive 12 column grid, with sizing classes available for elements spanning 1 through 12 columns, so you can easily mix and match column sizes. If you don't need all 12 columns, helper classes are included to center and/or reverse your columns.
1. Include the CSS file flexgrid-min.css from the source/ folder into your project folder, and link to that file in the head of your file:
<link rel="stylesheet" type="text/css" href="css/flexgrid-min.css" />.
2. Simply create a wrapper element with a .fg-row class. Place your column elements inside and give each a class of .fg-{breakpoint}-{column-width},
where {breakpoint} is the size at which the grid will collapse to full-width (see Breakpoint Sizes below) and {column-width} is the number of horizontal columns that the
element will occupy.
For example, if you want to create a three-column row that will stack vertically at the medium breakpoint size:
<div class="fg-row">
<div class="fg-md-4">
<h3>I'm first</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="fg-md-4">
<h3>I'm second</h3>
<p>And I have more content then the first and third grids. All grid boxes match height of the largest. Duis aute irure dolor in reprehenderit.</p>
</div>
<div class="fg-md-4">
<h3>I'm third</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
</div>
</div>
Which will look like:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
And I have more content then the first and third grids. All grid boxes match height of the largest. Duis aute irure dolor in reprehenderit.
Sed ut perspiciatis unde omnis iste natus error sit.
Flexgrid is designed to work with Bootstrap. No conflicts here. Use it in place of the default Bootstrap grid for better control over your content.
Like Flexgrid?
I work hard to provide PHP scripts that are user-friendly, responsive and free of bugs.
If you find an issue with any of my free scripts, please drop me a message from my site:
Contact Me
You can also help spead the word about grindStone by sharing it.
2016 by Jennifer Perrin · Flexgrid License