{% extends "admin/base_site.html" %} {% load i18n %} {% 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. Although MUELLER provides powerful options for responsive layouts, Grappelli does not use them for now (but that may change). Since 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) specifies the maximum column width and affects 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) defines the full page width and affects 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-#. For example, .g-d-4 defines 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.
.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 containing (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.