Skip to content
📏Grid layout, implemented by flex-box.
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
docs
layout
scripts
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
README.md
package.json
postcss.config.js
webpack.config.js
yarn.lock

README.md

grid-style npm Build Status

CSS grid layout which is based on 12 preset columns layout is implemented by flex box.

👉Browse online

Installing

# npm
npm i grid-style --save

# yarn
yarn add grid-style
<!-- CDN-->
<link rel="stylesheet" href="https://unpkg.com/grid-style@latest/dist/index.min.css">
<!-- or -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grid-style@latest/dist/index.min.css">
<!-- recommend you to add version number to url ending. eg.https://unpkg.com/grid-style@x.y.z -->

Usage

// import css file to js file
import 'grid-style/dist/index.min.css'
// or
import 'grid-style/dist/index.css'

// a sass alternative to css file
import 'grid-style/layout/index.sass'
/* import css file to your own css file */
@import 'grid-style';

/* or */

/* import sass file to your own sass file */
@import 'grid-style/layout/index.sass'

Basis

selector target description
.grid container define box container
.grid.no-wrap container disallow wrap item
.grid.col container set flex direction to column
.grid.cr container set flex direction to column-reverse
.grid.row container set flex direction to row
.grid.rr container set flex direction to row-reverse
.grid-cell item define default flex grow factor value of a item
.grid-cell-1 ~ .grid-cell-12 item define single item width (based on 1/12 container width
<div class="grid">
  <div class="grid-cell grid-cell-2">
    <!-- something you like -->
  </div>
  <div class="grid-cell">
    <!-- something you like -->
  </div>
</div>

Alignment

selector target description
.grid-top container define alignment per row to top-aligned
.grid-center container define alignment per row to vertically-centered
.grid-bottom container define alignment per row to bottom-aligned
.grid-jc-start container define alignment all item to left-aligned
.grid-jc-end container define alignment all item to right-aligned
.grid-jc-center container define alignment all item to horizontally-centered
.grid-jc-between container define alignment all item to space-between-aligned
.grid-jc-around container define alignment all item to space-around-aligned
.grid-cell-top item define alignment per item to top-aligned
.grid-cell-center item define alignment per item to vertically-centered
.grid-cell-bottom item define alignment per item to bottom-aligned

Notice: You have to make sure all item total width less than container width if you are using .grid-jc- properties. You can use .grid-cell-1 ~ .grid-cell-12 to limit item width.

Online alignment demo

<div class="grid grid-bottom">
   <!-- all child item element will be bottom-aligned excluding grid-cell alignment element -->
  <div class="grid-cell">
    <!-- content of this area will be bottom-aligned -->
  </div>
  <div class="grid-cell grid-cell-center">
    <!-- content of this area will be vertically-centered because of grid-cell-center -->
  </div>
</div>

Gutters

selector target description
.grid[grid-gutters="1"] ~ .grid[grid-gutters="10"] container define item gutter (based on .5em

Offset

selector target description
.offset-1 ~ .offset-12 item define item offset (based on 1/12 container width

Online offset demo

<div class="grid" grid-gutters="1">
  <div class="grid-cell offset-1">
    <!-- offset 8.33333% * 1 -->
  </div>
  <div class="grid-cell offset-5">
    <!-- offset 8.33333% * 5 -->
  </div>
  <div class="grid-cell offset-6">
    <!-- offset 8.33333% * 6 -->
  </div>
  <div class="grid-cell">
    <!-- no offset -->
  </div>
</div>

Response

Notice: This section define properties to all item (.grid-cell * n) from one container(.grid * 1).

selector target description
.grid-full container define all item (100% container width) width from same container
.grid-2 container define all item (50% container width) width from same container
.grid-3 container define all item (33.3333% container width) width from same container
.grid-4 container define all item (25% container width) width from same container
.grid-sm-1 ~ .grid-sm-12 item define single item width (8.3333% ~ 100% container width) under device width over 576px
.grid-md-1 ~ .grid-md-12 item define single item width (8.3333% ~ 100% container width) under device width over 768px
.grid-lg-1 ~ .grid-lg-12 item define single item width (8.3333% ~ 100% container width) under device width over 992px
.grid-xl-1 ~ .grid-xl-12 item define single item width (8.3333% ~ 100% container width) under device width over 1200px

If you are using version 0.3.x :

selector target description
.grid-full container define all item (100% container width) width from same container
.grid-2 container define all item (50% container width) width from same container
.grid-3 container define all item (33.3333% container width) width from same container
.grid-4 container define all item (25% container width) width from same container
.small-grid-fit container define flex: 1 , but it only works on device which width over 576px
.small-grid-full container same as .grid-full , but it only works on device which width over 576px
.small-grid-2 container same as .grid-2 , but it only works on device which width over 576px
.small-grid-3 container same as .grid-3 , but it only works on device which width over 576px
.small-grid-4 container same as .grid-4 , but it only works on device which width over 576px
.large-grid-fit container define flex: 1 , it only works on device which width over 768px
.large-grid-full container same as .grid-full , but it only works on device which width over 768px
.large-grid-2 container same as .grid-2 , but it only works on device which width over 768px
.large-grid-3 container same as .grid-3 , but it only works on device which width over 768px
.large-grid-4 container same as .grid-4 , but it only works on device which width over 768px
You can’t perform that action at this time.