Grid¶
- References
-
class
crispy_forms_foundation.layout.grid.
Row
(*fields, css_id=None, css_class=None, template=None, **kwargs)[source]¶ Bases:
crispy_forms_foundation.layout.base.Div
Wrap fields in a div whose default class is
row
. Example:Row('form_field_1', 'form_field_2', 'form_field_3')
Act as a div container row, it will embed its items in a div like that:
<div class="row">Content</div>
-
class
crispy_forms_foundation.layout.grid.
RowFluid
(*fields, css_id=None, css_class=None, template=None, **kwargs)[source]¶ Bases:
crispy_forms_foundation.layout.grid.Row
Wrap fields in a div whose default class is “row row-fluid”. Example:
RowFluid('form_field_1', 'form_field_2', 'form_field_3')
It has a same behaviour than Row but add a CSS class “row-fluid” that you can use to have top level row that take all the container width. You have to put the CSS for this class to your CSS stylesheets. It will embed its items in a div like that:
<div class="row row-fluid">Content</div>
The CSS to add should be something like that:
It must be included after Foundation grid component is imported.
-
class
crispy_forms_foundation.layout.grid.
Column
(field, *args, **kwargs)[source]¶ Bases:
crispy_forms_foundation.layout.base.Div
Wrap fields in a div. If not defined, CSS class will default to
large-12 columns
.columns
class is always appended, so you don’t need to specify it.This is the column from the Foundation Grid component, all columns should be contained in a Row or a RowFluid and you will have to define the column type in the
css_class
attribute.Example:
Column('form_field_1', 'form_field_2', css_class='small-12 large-6')
Will render to something like that:
<div class="small-12 large-6 columns">...</div>
columns
class is always appended, so you don’t need to specify it.If not defined,
css_class
will default tolarge-12
.