CSS grid frameworks are a handy solution for rapid development of page layouts. One minimal CSS grid framework that I have taken a liking to is Grid – a minimal CSS Grid utility.
As pointed out in Javascript HTML CSS’s article on Grid Grid is limited to the number of columns declared in the CSS with the default maximum being 5 columns. The path to extend Grid is a task as easy as coloring within the lines.
As an exercise I wrote This jQuery plugin which eliminates the need for the CSS file within Grid. While the prospect of relying on JavaScript to maintain a layout makes me cringe – It does offer a limitless approach with customizable options. On Document ready this plugin parses the elements on the page and applies the appropriate CSS properties to the elements within the DOM based on the naming convention proposed by Grid.
Pros:
- Limitless possible combination of columns
- Customizable naming convention
Cons:
- Relying on JavaScript to write your layout CSS
The CSS Grid jQuery plugin applies Grid CSS to DOM elements based on the naming convention of Grid – a minimal CSS Grid Utility.
Usage
- Include the jquery.cssgrid.js plugin, along with jQuery
- Add a class “grids” to the container of elements you would like to apply the Grid CSS styles.
- Define your desired grid size by applying “gxofy” where “x” is the segment of the “y” whole.
- Invoke the plugin on document ready
Example
$(document).ready(function() {
$.cssGrid($('.grids'));
});
Alternative String
By default the plugin looks for the starting character “g” and the string separator “of”. These are customizable.
Example:
$(document).ready(function() {
$.cssGrid($('.grids'), {
startString: 'g',
seperatorString: 'of'
});
});