yifan-blog / css-grid-layout-generator

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CSS Grid Layout Generator

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

Gif Demo

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.

About

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

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

License:MIT License


Languages

Language:CSS 74.9%Language:TypeScript 21.9%Language:JavaScript 2.6%Language:HTML 0.5%