The Grid System

The Responsive Grid

---

The Grid System

The Grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

The Grid System has four classes:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

Grid System Rules

• Rows must be placed within a Responsive Layout
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Columns are created by specifying the number of 12 available columns you wish to span. For example, Three equal columns would use three Columns set to a width of 4; 4+4+4 = 12;

Examples

We will create a basic grid system that starts out stacked on mobiles/tablets (small devices), before becoming horizontal on desktops (medium/large devices).

The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):

ResponsiveLayout responsiveLayout = new ResponsiveLayout();
Row row = new Row();

Column column1 = new Column();
column1.addRule(DisplaySize.XS,12)
column1.addRule(DisplaySize.MD,6)

Column column2 = new Column();
column2.addRule(DisplaySize.XS,12)
column2.addRule(DisplaySize.MD,6)

row.addColumn(column1);
row.addColumn(column2);

responsiveLayout.addRow(row);

The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:```java

ResponsiveLayout responsiveLayout = new ResponsiveLayout();
Row row = new Row();

Column column1 = new Column();
column1.addRule(DisplaySize.XS,4)

Column column2 = new Column();
column2.addRule(DisplaySize.XS,4)

Column column3 = new Column();
column3.addRule(DisplaySize.XS,4)

row.addColumn(column1);
row.addColumn(column2);
row.addColumn(column3);

responsiveLayout.addRow(row);