https://github.com/markteekman/flexbox-grid
Flexbox Grid is a simple yet powerful responsive front-end grid based on the Flexbox CSS property. It helps you to quickly build advanced layouts for prototyping and real-life projects.
https://github.com/markteekman/flexbox-grid
columns css flexbox flexbox-css flexbox-grid front-end grid grid-layout responsive responsive-design responsive-layout scss
Last synced: 2 months ago
JSON representation
Flexbox Grid is a simple yet powerful responsive front-end grid based on the Flexbox CSS property. It helps you to quickly build advanced layouts for prototyping and real-life projects.
- Host: GitHub
- URL: https://github.com/markteekman/flexbox-grid
- Owner: markteekman
- License: mit
- Created: 2020-01-23T08:07:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-20T11:11:19.000Z (about 6 years ago)
- Last Synced: 2025-09-18T21:43:14.470Z (10 months ago)
- Topics: columns, css, flexbox, flexbox-css, flexbox-grid, front-end, grid, grid-layout, responsive, responsive-design, responsive-layout, scss
- Language: CSS
- Homepage: https://markteekman.nl/project/flexbox-grid
- Size: 11.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flexbox Grid
**Powerful, simple, responsive.**
Flexbox Grid is a simple yet powerful responsive front-end grid based on the Flexbox CSS property. It helps you to quickly build advanced layouts for prototyping and real-life projects. Either choose the minified CSS version or the SCSS version to get started. The SCSS version includes a responsive breakpoint mixin as a **bonus** 😉
**Browser support**: All major browsers including Firefox, Safari, Chrome, Opera and Edgde. Includes fallbacks for Internet Explorer 11+.
[DEMO WITH EXAMPLES AND OPTIONS](https://markteekman.nl/project/flexbox-grid)
## Minified CSS
The quickest way to get started is to include the minified CSS version into your project:
```html
```
**Note**: Be sure to include a reset like [Normalize](https://necolas.github.io/normalize.css/) or your own version for setting the default box-sizing, margins and paddings. The minified version sets the box-sizing to default. This minimizes deviations between browsers.
Basic usage (see the demo for all examples and options):
```html
```
## SCSS
To use the SCSS version just include the partial files into your project. You can find the variables of the responsive breakpoints and your grid in the `app.scss` file. As a bonus you can use the breakpoint mixin with the the pre-defined breakpoint variables (small, medium, large and huge). For example:
```scss
@include breakpoint(medium) {
// your styles for the medium and larger breakpoint
}
```
Or use the custom breakpoint:
```scss
@include breakpoint(840) {
// your styles for the 840px and larger breakpoint
}
```
**Tip**: To minimize deviations between browsers use vendor prefixing and CSS resets when compiling your SCSS.
## License
MIT license. Use it however you like 😄
## Inspiration
Inspired by some awesome people and organizations on the web: Zell Liew, ZURB's Foundation, CSS Tricks and Solved by Flexbox to name a few.
## Something not working right?
Let me know by submitting an issue. I'll see what I can do!