## Basic grid

The basic grid in Superdesk is based on flex grid and works very similarly to the standard float grid. It is intended for positioning items in a grid layout, with columns that have equal width, either on separate pages or inside other elements. Basic responsive features are included, if you need full layout grid look at the Layout grid.

Basic grid supports 1 - 6 columns, it is defined as mobile first.

Grid container example class: `flex-grid flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6`.

If you don't need responsive behavior, minimum of code to achieve same number of columns, container class for 2 columns will be: `flex-grid flex-grid--small-2`.

Grid item class is `flex-grid__item`.

Note: flex grid is only supported in Chrome, Firefox, Safari 6+ and IE10+.

### Default

Example Markup

// Responsive grid // 1 column - small, 3 columns - medium, 4 columns - large, 6 columns - xlarge

1
2
3
4
5
6
7
8
9
10
11
12

// Four columns grid same for all screens

1
2
3
4
5
6
7
8
9
10
11
12

                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12

                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12

### Boxed

Adding the modifier `flex-grid--boxed` to the `flex-grid` will calculate and add margins to the `flex-grid__item` elements.

Example Markup

// Boxed grid example with six columns.

1
2
3
4
5
6
7
8
9
10
11
12

                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12