grid-style

CSS grid layout which is based on 12 preset columns layout 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/[email protected] -->

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 |