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

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

Grid Container

The grid container .g-d-c (its outline is dotted in the following example) maintains the maximum column width and impacts 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) maintains the full page width and impacts 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-#, 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 %}

Multiple Lines in a Grid Container

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

Predefined Layouts

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

{% endblock %}