{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » >Predefined Layouts{% endblock %} {% block breadcrumbs %} {% endblock %} {% block content %}

Predefined Layouts

There are several predefined layouts based on the grid system Grappelli uses.

Layout 2-Columns: Fixed & Fluid

The layout with the class .l-2c-fluid contains to child columns: The column .c-1 has always a fixed width and the column .c-2 a fluid width.

By adding .l-d-# to the layout .l-2c-fluid you define the number of columns the .c-1 covers, e.g. .l-2c-fluid.l-d-4 when the .c-1 should stretch over 4 columns.

.c-1

.c-2

.c-1

.c-2

{% filter force_escape %}
...
...
...
...
{% endfilter %}

Reverse this Layout

It is easy to reverse this layout: If you want to switch the order of the columns just change the layout class to .l-2cr-fluid.

.c-1

.c-2

.c-1

.c-2

{% filter force_escape %}
...
...
...
...
{% endfilter %}

Use this Layout inside a Grid

You may also use this layout within a grid container or grid-based columns: Just put the layout .l-2c-fluid (or the reversed .l-2cr-fluid) inside a .g-d-c or .g-d-# (e.g. below).

.c-1

.c-2

.c-1

.c-2

{% filter force_escape %}
...
...
...
...
{% endfilter %}
{% endblock %}