Response Rows

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

How it works

Grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

12 Columns

<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
</ResponsiveRow>

Other Examples

colspan 4

colspan 8

colspan 4

colspan 6

colspan 4

<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn ColspanExtraSmallScreen="4" ColspanLargeScreen="4" ColspanMediumScreen="4" ColspanSmallScreen="4" />
  <ResponsiveColumn ColspanExtraSmallScreen="8" ColspanLargeScreen="8" ColspanMediumScreen="8" ColspanSmallScreen="8" />
</ResponsiveRow>
<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn ColspanExtraSmallScreen="8" ColspanLargeScreen="8" ColspanMediumScreen="8" ColspanSmallScreen="8" />
  <ResponsiveColumn ColspanExtraSmallScreen="4" ColspanLargeScreen="4" ColspanMediumScreen="4" ColspanSmallScreen="4" />
</ResponsiveRow>
<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn />
  <ResponsiveColumn />
</ResponsiveRow>
<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn />
  <ResponsiveColumn />
  <ResponsiveColumn />
</ResponsiveRow>

Column Ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

colspan 9 .col-xs-push-3

colspan 3 .col-xs-pull-9

<ResponsiveRow CollisionBehavior="Overlap">
  <ResponsiveColumn Class="col-xs-push-3" ColspanExtraSmallScreen="9" ColspanLargeScreen="9" ColspanMediumScreen="9" ColspanSmallScreen="9" />
  <ResponsiveColumn Class="show-grid col-xs-pull-9" ColspanExtraSmallScreen="3" ColspanLargeScreen="3" ColspanMediumScreen="3" ColspanSmallScreen="3" />
</ResponsiveRow>

Even Columns

1 of 3

2 of 3

3 of 3

1 of 5

2 of 5

3 of 5

4 of 5

5 of 5

<Division Class="row" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>

<Division Class="row" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3

2 of 3 (wider)

3 of 3

<Division Class="row" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col-6" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>

Vertical alignment

Use flexbox alignment utilities to vertically align columns.

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3

3 of 3

<Division Class="row align-items-start" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>

<Division Class="row align-items-center" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>

<Division Class="row align-items-end" HtmlDiv="True">
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
  <Division Class="col" HtmlDiv="True" />
</Division>