T - css framework | Flex grid

Example 1: default container, row and cols

col col_24 col_w1-12 col_w3-6

col col_24 col_w1-24 col_w3-12

col col_24 col_w1-24 col_w3-24

Example 2: boxed container

Add class .container_boxed to transform container in a boxed container

col col_24 col_w1-12 col_w3-6

col col_24 col_w1-24 col_w3-12

col col_24 col_w1-24 col_w3-24

Example 3: Boxed container and gutters

Add classes .container_gutter, .row_gutter and .col_gutter to apply gutters. For small gutters use the modifiers .XX_gutter-small; for large gutters use the modifiers .XX_gutter-large

col col_24 col_w1-12 col_w3-6 col_gutter

col col_24 col_w1-24 col_w3-12 col_gutter

col col_24 col_w1-24 col_w3-24 col_gutter

Example 4: Responsive reset gutters

Add classes .container_wX-gutter-reset, .row_wX-gutter-reset and .col_wX-gutter-reset to reset gutter between two specific breakpoints. By default the framework generates the classes to reset gutters between w0 - w3, w3 - w5 and from w5 and up.

col col_24 col_w1-12 col_w3-6 col_gutter col_w0-gutter-reset

col col_24 col_w1-24 col_w3-12 col_gutter col_w0-gutter-reset

col col_24 col_w1-24 col_w3-24 col_gutter col_w0-gutter-reset

Example 5: Horizontally and vertically center row content

Use the classes .row_vcenter and .row_hcenter to vertically and horizontally center content in the row

col col_24 col_w1-12 col_w3-6

col col_24 col_w1-24 col_w3-12

col col_24 col_w1-24 col_w3-24

Example 6: Offset cols

Use the classes .col_offset-X and .col_wX-offset-X to apply and offset to the cols. Use the classes .col_negative-offset-X and .col_wX-negative-offset-X to apply negative offset to the cols

col col_22 col_w1-10 col_w3-8 col_offset-1 col_w1-offset-2 col_w3-offset-4

col col_24 col_w1-10 col_w3-8

col col_24 col_w1-24 col_w3-16 col_w3-negative-offset-4

col col_24 col_w1-18 col_w3-12