# fr-flexbox-grid

> Just another css framework for grid layout simplified but complete.

Latest version **0.0.0** (published 2018-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install fr-flexbox-grid
pnpm add fr-flexbox-grid
yarn add fr-flexbox-grid
bun add fr-flexbox-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2018-01-10 |
| First published | 2018-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thiago Feijó Ramos |
| Maintainers | feijor |

## Links

- npm: https://www.npmjs.com/package/fr-flexbox-grid
- Repository: https://github.com/Feijor/flexbox-grid
- Issues: https://github.com/Feijor/flexbox-grid/issues
- npm.io page: https://npm.io/package/fr-flexbox-grid

## Recent versions

- 0.0.0 (latest) — 2018-01-10

## README

<h1 align="center">Flexbox Grid</h1>

<h5 align="center">Just another css framework for grid layout simplified but complete.</h5>

## Example

You can work in two ways.

1 - By column and sub-column:

```html
<div class="row">
  <div class="col-lg-8">
  </div>
  <div class="col-lg-2-5">
  </div>
  <div class="col-lg-1-5">
  </div>
</div>
```

This is similar to the original flexbox, divided into 12 columns divided by screen sizes xs, sm, md and lg. But each column can have 10 subdivisions so if your layout needs a column greater than 1 and less than 2 you can use col-xs-1-5 for example that represents half of a column.

2 - Breakdown by percentage: 

```html
<div class="row">
  <div class="col-p-lg-50">
  </div>
  <div class="col-p-lg-25">
  </div>
  <div class="col-p-lg-25">
  </div>
</div>
```

This is more like the css grid having division by percentage.

---
_Source: https://npm.io/package/fr-flexbox-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._