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 → sukazavr → css-grid-layout-generator

sukazavr / css-grid-layout-generator

Licence: MIT license
The Quickest & Easiest Way To Build Complex CSS Grid Layouts

Programming Languages

CSS
56736 projects
typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

toolcss-gridwebapp

Projects that are alternatives of or similar to css-grid-layout-generator

React Messenger
Chat UX components built with React, inspired by Facebook Messenger
Stars: ✭ 167 (+156.92%)
Mutual labels:  css-grid
React Snuggle
An intimate and comfortable way to layout your components
Stars: ✭ 251 (+286.15%)
Mutual labels:  css-grid
Two-Lines-CSS-Framework
Two Lines CSS Framework
Stars: ✭ 17 (-73.85%)
Mutual labels:  css-grid
Recal
A minimal, accessible React/Preact calendar component using modern CSS.
Stars: ✭ 191 (+193.85%)
Mutual labels:  css-grid
Blueprint Css
📘 Blueprint CSS is a modern responsive CSS layout library & grid built on top of CSS Grid and Flexbox.
Stars: ✭ 233 (+258.46%)
Mutual labels:  css-grid
Fluid
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development
Stars: ✭ 24 (-63.08%)
Mutual labels:  css-grid
Vue Comment Grid
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
Stars: ✭ 143 (+120%)
Mutual labels:  css-grid
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (+0%)
Mutual labels:  css-grid
React Css Grid
React layout component based on CSS Grid Layout and built with styled-components
Stars: ✭ 239 (+267.69%)
Mutual labels:  css-grid
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-58.46%)
Mutual labels:  css-grid
Css Mint
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
Stars: ✭ 209 (+221.54%)
Mutual labels:  css-grid
Canvas Sketch
App to sketch out a business model canvas
Stars: ✭ 232 (+256.92%)
Mutual labels:  css-grid
css-grid-playground
CSS Grid Playground
Stars: ✭ 13 (-80%)
Mutual labels:  css-grid
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+166.15%)
Mutual labels:  css-grid
glide
a modular but comfy startpage for many scenarios
Stars: ✭ 39 (-40%)
Mutual labels:  css-grid
Frow
Flexbox Toolkit & Grid
Stars: ✭ 152 (+133.85%)
Mutual labels:  css-grid
PotatoCSS
🥔 Simple CSS framework for hackers. Simple as potato.
Stars: ✭ 53 (-18.46%)
Mutual labels:  css-grid
grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (+21.54%)
Mutual labels:  css-grid
DisplayStructureElements
Display the structure of the elements in web template.
Stars: ✭ 17 (-73.85%)
Mutual labels:  css-grid
csslayout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
Stars: ✭ 7,297 (+11126.15%)
Mutual labels:  css-grid
View All Similar Projects ➔

CSS Grid Layout Generator

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

Gif Demo

https://css-grid-layout-generator.pw/

Roadmap

  • Soon
    • Auto-generated grid tracks (aka implicit grid tracks)
    • repeat() notation for columns and rows
    • fit-content() notation for columns and rows
  • Export Code
    • Export HTML as JSX
    • Export CSS as Styled Components
    • Export class names as CSS Modules
    • Syntax highlight
    • Add prefixes to grid names (to avoid potential class conflicts)
    • Button "Create CodePen"
    • Save and restore grid settings feature
  • Grid Items
    • Opacity adjustment
    • Support negative start/end lines
    • Show details as CSS-rules in a tooltip
  • Grid Editor
    • Set custom dimension for Auto Grid
  • Big Features
    • Conditional grid settings via CSS Media Queries
    • Nested Grids
  • Other
    • Tips everywhere as (?) button
    • Drag & Drop for columns and rows
    • Support for touch screen devices
    • Persist grid settings (Local Storage)
    • Button "Reset Grid Settings"
    • Show preview in a new window

How to commit

npx git-cz

Author

Dmitrii Bykov

License

MIT License

Copyright © 2018, Dmitrii Bykov.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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].