The Portal site is built on a 12 column responsive grid. Using block classes in Titan, the content author can create near-infinite variations of layout within the grid columns, while maintaining control over how the content renders at 3 different screen size variations (small, medium and large). The classes are names for the device size they target and the number of columns they should span at that size. When a screen size is not specifially listed, grid items on that device will fill the width of their parent container.

The first set of containers below are set to display 2-up on small devices, 3-up on medium devices and 4-up on large screens. They accomplish this with the classes s6, m4, and l3.

• s6 = span 6 columns on small devices (or one-half)
• m4 = span 4 columns on medium devices (or one-third)
• l3 = span 3 columns on large devices (or one-quarter)