https://github.com/lekoala/flex-grid

A powerful flex based grid system
https://github.com/lekoala/flex-grid

bootstrap css custom-element flex grid layout

Last synced: about 2 months ago
JSON representation

A powerful flex based grid system

• Host: GitHub
• URL: https://github.com/lekoala/flex-grid
• Owner: lekoala
• License: mit
• Created: 2021-05-31T23:25:21.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-09T14:53:39.000Z (over 3 years ago)
• Last Synced: 2024-11-27T17:01:43.974Z (2 months ago)
• Topics: bootstrap, css, custom-element, flex, grid, layout
• Language: HTML
• Homepage:
• Size: 38.1 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-standalones - `<flex-grid>`

README

        
# flex-grid

[![NPM](https://nodei.co/npm/flex-grid-element.png?mini=true)](https://nodei.co/npm/flex-grid-element/)

[![Downloads](https://img.shields.io/npm/dt/flex-grid-element.svg)](https://www.npmjs.com/package/flex-grid-element)

A powerful flex based grid system

## Introduction

Bootstrap 5 grid weights about 51kb minified. flex-grid, on the other hand, weights 4kb of css + 2 kb of js and provide a

similar feature set. Only 4kb of blocking css are between you are your dream layout!

## How to use

Simply include the library

```html

```

And use your grid

```html

  
Col 1

  
Col 2

  
Col 3


```

## Why a custom element ?

The custom element is just a convenience around setting the custom styles

It just makes the whole thing neat. Also, it allows targeting of elements

based on their attributes in css.

```html

  
col 1 of md=3/lg=4

  
col 2 of md=3/lg=4

  
col 3 of md=3/lg=4

  
col 4 of md=3/lg=4


```

Also, using attributes makes it very clear what is related to the layout when

classes can mean various things.

## Demo and more

For usage, please look at the demo

See demo.html or https://codepen.io/lekoalabe/pen/ExWowBM