GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → AllThingsSmitty → responsive-css-grid

AllThingsSmitty / responsive-css-grid

Licence: MIT license
A super-lightweight, responsive, 8-column grid based on box-sizing

Programming Languages

CSS
56736 projects

Labels

cssgridresponsivecss-gridpurecssresponsive-gridbox-sizingpure-css

Projects that are alternatives of or similar to responsive-css-grid

gutter-grid
A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11
Stars: ✭ 18 (-60.87%)
Mutual labels:  grid, responsive, responsive-grid
Ungrid
ungrid - the simplest responsive css grid
Stars: ✭ 1,292 (+2708.7%)
Mutual labels:  grid, responsive, css-grid
bootstrap-grid-ms
Missing grid range in Bootstrap 3, micro-small from 480-767px.
Stars: ✭ 34 (-26.09%)
Mutual labels:  grid, responsive, responsive-grid
awesome-grids-css
A curated list of awesome Grids CSS System 🤘
Stars: ✭ 34 (-26.09%)
Mutual labels:  grid, css-grid
Fluid
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development
Stars: ✭ 24 (-47.83%)
Mutual labels:  responsive, css-grid
vue-grid-responsive
Responsive grid system based on Bootstrap for Vue
Stars: ✭ 27 (-41.3%)
Mutual labels:  grid, responsive
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+4419.57%)
Mutual labels:  grid, responsive
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (+41.3%)
Mutual labels:  grid, css-grid
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-41.3%)
Mutual labels:  grid, css-grid
ekzo
💫 Functional Sass framework for rapid and painless development
Stars: ✭ 32 (-30.43%)
Mutual labels:  grid, responsive
svelte-grid-responsive
Responsive grid system based on Bootstrap for Svelte
Stars: ✭ 41 (-10.87%)
Mutual labels:  grid, responsive
PotatoCSS
🥔 Simple CSS framework for hackers. Simple as potato.
Stars: ✭ 53 (+15.22%)
Mutual labels:  responsive, css-grid
mesh
A page builder, simplified. Get the most flexibility to display content by adding multiple content sections within Pages, Posts, or Custom Post Types.
Stars: ✭ 44 (-4.35%)
Mutual labels:  responsive, responsive-grid
react-super-styled
Responsive JSX layouts with Styled Components
Stars: ✭ 77 (+67.39%)
Mutual labels:  grid, responsive
Blueprint Css
📘 Blueprint CSS is a modern responsive CSS layout library & grid built on top of CSS Grid and Flexbox.
Stars: ✭ 233 (+406.52%)
Mutual labels:  grid, css-grid
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (-60.87%)
Mutual labels:  grid, responsive
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-58.7%)
Mutual labels:  grid, responsive
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-65.22%)
Mutual labels:  grid, css-grid
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (+254.35%)
Mutual labels:  grid, responsive
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+4617.39%)
Mutual labels:  grid, responsive
View All Similar Projects ➔

Responsive CSS Grid

NPM version

A super-lightweight, responsive, 8-column grid based on box-sizing.

Getting Started

You may install this plugin with this command:

npm install responsive-css-grid --save-dev

Issues with the output should be reported on the responsive-css-grid issue tracker.

Usage

<div class="container">

  <div class="row">
    <div class="col-2-3"> <!-- column is 2/3 the total width -->
      Your content
    </div>
    <div class="col-1-3"> <!-- column is 1/3 the total width -->
      Your content
    </div>
  </div>

  <div class="row">
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
    <div class="col-1-2"> <!-- column is 1/2 the total width -->
      Your content
    </div>
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
  </div>

</div>

Live Example

Responsive CSS grid.

Browser support

The responsive CSS grid works in the latest versions of:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge
  • Internet Explorer
  • iOS Safari
  • Chrome for Android

The above list is non-exhaustive. This grid works perfectly with any browser that supports box-sizing, including IE8+.

License

The MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].