Grid systems are used for creating page layouts through a series of rows and columns that included your content. Skeleton FX includes a responsive fluid grid system that appropriately scales up to 10 columns as the device or viewport size increases. It has 4 types of predefined classes for easy layout options. Each type is responsible for the corresponding device according to the screen resolution. You can use the following classes:
.width-* (for common layouts),
.width-tiny-* (for resolution between 320px and 479px),
.width-small-* (for resolution between 480px and 767px),
.width-medium-* (for resolution ≥ 768px) or
.width-large-* (for resolution ≥ 960px.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, if applying any
.width-medium-* class to an element will not only affect its styling on medium devices but also on large devices if a
.width-large-* class is not present.
If you need for different devices build different layouts just include an additional major classes in accordance with the appropriate screen resolution.
If you need to make separated grid blocks include an additional class
.column-block. It can be useful in example for media content populating. For add border include an additional class
.bordered. For add rounded corners include an additional class