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:

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);