{% 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 %} {% endblock %} {% block content %}

MUELLER Grid System

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").

Grid Container

The grid container .g-d-c (its outline is dotted in the following example) specifies the maximum column width and affects all child elements.

Module

Row

Row

{% filter force_escape %}

Module

Row

Row

{% endfilter %}

Fluid Container

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.

Module

Row

Row

{% filter force_escape %}

Module

Row

Row

{% endfilter %}

Grid Columns

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 %}

Multiple Lines in a Grid Container

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 %}

Predefined Layouts

There are several predefined layouts based on the Mueller Grid System.

{% endblock %}