# Flexbox Grid
> A grid system based on the **flex** display property.
[flexboxgrid.com](http://flexboxgrid.com/)
»Flexbox Grid« is a lightweight CSS stylesheet, which provides classes to create a simple and responsive row-column-layout. It is a alternative to larger libraries like Bootstrap and if you need just a responsive row-column-layout it is recommended to use something like Flexbox Grid.
## Row-column layout
[Source](https://mdbootstrap.com/education/react/agenda-4-bootstrap/)
This layout is very common for web design. The width of the screen is divided into 12 columns. These columns are stored in a row. (So the example above consists of 4 rows.)
Both rows and columns are defined through `div` container and are placeholders for other content. The layout is made responsive through defining different columns for different screen sizes. Common breakpoints for devices and their corresponding class names are displayed in the table below:
### Breakpoints
| Breakpoint | Class infix | Dimensions |
| ----------------- | ----------- | ---------- |
| X-Small | *None* | <576px |
| Small | `sm` | ≥576px |
| Medium | `md` | ≥768px |
| Large | `lg` | ≥992px |
| Extra large | `xl` | ≥1200px |
| Extra extra large | `xxl` | ≥1400px |
[Source](https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints)
## Flexbox Grid
Download the .zip folder from [flexboxgrid.com](http://flexboxgrid.com/) and extract it. The only necessary file is `flexboxgrid.min.css` inside `flexboxgrid-6.31 > css`. (If you want to inspect the css file, have a look at the not minified version `flexboxgrid.css`.) Copy the css file to your css folder and import it:
```html
flexboxgrid
```
The following code demonstrates the basic possibilities of flexboxgrid. For more see the website.
`index.html`
```html
flexboxgrid