css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

•    CSS

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

ungrid - ungrid - the simplest responsive css grid

•    CSS

ungrid is a tiny, responsive, table-based CSS grid system. The entire ungrid.css file is 97 bytes minified. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids. See it in action.

pills - A simple responsive CSS Grid for humans. View Demo -

•    CSS

First - The ones who just memorize the cryptic codes like col-md-6 or whatever from their favourite CSS Framework like Bootstrap or Foundation. And not long before, I too was in this category using Bootstrap's grid all the time. Second - The ones who simplify the grids into simple partitions of the page. Like half of the page or one-third or something like that and process ahead with that. One of the best grid frameworks that is present for this category is Gridism which actually inspired me to create Pills in the first place.

must-watch-css - A useful list of must-watch talks about CSS

This is a collection of well-received talks about CSS, covering topics such as CSS frameworks, Sass, SVG, animation, scalability, CSS performance, tooling, mobile tips, and more. Like JavaScript? Check out Must-Watch JavaScript! For other great lists check out @sindresorhus's curated list of awesome lists.

kuhn - WordPress theme featuring CSS Grid layouts via aggressive progressive enhancement

•    CSS

WordPress meets CSS Grid. designed and developed by Morten Rand-Hendriksen. Kuhn is hyper-opinionated and developed to take advantage of modern CSS. It was developed for mor10.com and is released as a showcase of what CSS Grid can do for WordPress theme layouts. Contributors welcome.

teutonic-css - A modern CSS framework — versatile, well documented.

•    CSS

Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars. This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.

modern-css-layouts - A collection of popular web layouts implemented using modern CSS flexbox or grid

•    HTML

Collection of CSS Layouts of popular sites, implemented at basic level using modern CSS layouts such as flexbox or grid.

1-line-CSS-Framework - One Line CSS Framework

•    HTML

Every column can be divided by two, becoming half column or 50% column. One column can become 2 (50%) column or 100% = 50% + 50%.

Box-CSS-Framework - Box - CSS Framework

•    HTML

This solution is based on box-sizing: border-box and display:inline-block building principles.

SMART-CSS-GRID - SMART CSS GRID - CSS Framework

•    HTML

Smart CSS Grid is CSS GRID based fluid responsive layout system with 12 columns. Read more on my blog..

layup - :basketball: CSS Grid Layout made easy.

•    Javascript

A tiny React helper for CSS layout using named areas and lines from CSS Grid. Strong opinion time! Using the margin property never made sense in the web app/component world. It’s a relic from the very first version of CSS, when we were laying out paragraphs of text in 1997. CSS Grid antiquates this practice. People just haven’t caught on yet.

vue-css-grid - A tool for easier grid CSS layout

•    Javascript

You can clone this project, install all dev dependencies with npm install and then npm run dev to see a live running example with responsive breakpoints. For usage reference you can also check directly Example.vue and MainContent.vue components.

canvas-sketch - App to sketch out a business model canvas

•    Javascript

A web app to sketch out a business model canvas. The app is available free online.

hugo-theme-zen - A port of the Drupal zen base theme with css-grid, libsass and gulp support.

•    CSS

Zen theme strives to be as clean and standard compliant as possible with some neat features. A solid base for your custom Hugo theme. It uses HTML5 with a modern CSS grid and flex layout. Recent versions of all the mayor browsers support it, see Can I use css grid.

react-css-grid - React layout component based on CSS Grid Layout and built with styled-components

•    Javascript

Sets the width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. Sets the gutter (grid-gap) between columns. Pass a number for pixel values or a string for any other valid CSS length.

bem-kit - 💄 CSS UI kit with BEM convention and SASS

•    CSS

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

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

•    CSS

A super-lightweight, responsive, 8-column grid based on box-sizing. Issues with the output should be reported on the responsive-css-grid issue tracker.

recal - A minimal, accessible React/Preact calendar component using modern CSS.

•    Javascript

A minimal, accessible React/Preact calendar component using modern CSS, for modern browsers. Now with a 100 Lighthouse Accessibility Audit score. It works with native Javascript dates, so there's no need to import any heavy dependencies like moment. For a set of functions for working with Javascript Dates, we recommend date-fns. For a more flexible, fully-featured set of calendar components, see react-dates. If you're using recal from npm, be sure to import the necessary modules into the file you wish to use it in.

60gs - 60GS - 60 Columns Grid System based on CSS Grid Layout

•    HTML

60 Grid System is Starter Grid for the CSS Grid. 60 Grid System is Starter Grid for the CSS Grid.

Katana - Katana is CSS Layout System made with Flexbox

•    HTML

Minimal flexbox system for making HTML layouts. Basically you can generate any grid with any value or unit you like just change the default numbers in the katana.scss.