{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Mueller Grid System{% endblock %} {% block breadcrumbs %}
Grappelli uses the Mueller Grid System – a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.
Though the Mueller Grid System provides powerful possibilities for responsive layouts Grappelli does not use them for now. But that may change. And that's why we skipped using Blueprint and developed something which rather fits our and the futures needs.
As Grappelli solely supports desktop resolutions this documentation refers to .g-d-* classes only (the "d" represents media "desktop").
The grid container .g-d-c (its outline is dotted in the following example) maintains the maximum column width and impacts all child elements.
Row
Row
{% filter force_escape %}
Module
Row
Row
{% endfilter %}
The fluid container .g-d-c-fluid (its outline is dotted in the following example) maintains the full page width and impacts all child elements.
Row
Row
{% filter force_escape %}
Module
Row
Row
{% endfilter %}
Grappellis Grid consists of 24 columns.
To define the span of columns use .g-d-#, e.g. .g-d-4 for an element which stretches over 4 columns. Make sure to add .g-d-f to the first and .g-d-l to the last element while counting 24 columns.
.g-d-4 .g-d-f
.g-d-8
.g-d-6
.g-d-6 .g-d-l
{% filter force_escape %}
...
...
...
...
{% endfilter %}
When constructing a grid container with multiple lines carrying (different) grid columns the best practice is to wrap each line with a .g-d-24.
.g-d-4 .g-d-f
.g-d-8
.g-d-6
.g-d-6 .g-d-l
.g-d-8 .g-d-f
.g-d-8
.g-d-8 .g-d-l
{% filter force_escape %}
...
...
...
...
...
...
...
{% endfilter %}
There are several predefined layouts based on the Mueller Grid System.