Grid-style NPM

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/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
.gridgrid-gutters="1" ~ .gridgrid-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`