grid-style

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