The Quickest & Easiest Way To Build Complex CSS Grid Layouts

By Dmitrii Bykov
Last update: Sep 23, 2022
Comments: 7

CSS Grid Layout Generator

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

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

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.

Github

https://github.com/sukazavr/css-grid-layout-generator

Comments(7)

1

For some reason when using your demo, if I try to insert a row above the very first one, it shows up at the end

Using the online demo, I click the first row, where I want to put a row above it, but the new row is at the bottom. This is with items created and occupying the first row. Perhaps I am not following the correct procedure.
2

add feature - dir="RTL"

when you use dir=RTL for languages written from right to left, all the layout is reversed and the count starts from "end" to "start" meaning the starting div is top right this would be much appreciated
3

add features: paste current css & html

first - this is a great tool ! good work !!

the problem is that it is one time shot. after you take the results to your project you cant make any changes if you need but to build the whole grid from start... so please add an option to start from existing html & css from previous work
4

chore(deps): bump lodash.template from 4.4.0 to 4.5.0
Bumps lodash.template from 4.4.0 to 4.5.0.
Commits
- ab73503 Bump to v4.5.0.
- a4f7d4c Rebuild lodash and docs.
- cca5ac6 Fix npm-test by removing the call to test-docs.
- 9f7f9fc Adjust heading order. [ci skip]
- 6e2fb92 Remove unused baseArity.
- 4f702e2 Specify utf8 encoding.
- b188f90 Add fp tests for iteratee shorthands.
- 7b93dc9 Ensure clone methods clone expando properties of boolean, number, & string ob...
- 664d66a Make string tests more consistent.
- d9dc0e6 Add _.invertBy tests.
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
5

chore(deps): bump handlebars from 4.0.12 to 4.7.1
Bumps handlebars from 4.0.12 to 4.7.1.
Changelog

Sourced from handlebars's changelog.
v4.7.1 - January 12th, 2020

Bugfixes:
- fix: fix log output in case of illegal property access - f152dfc
- fix: log error for illegal property access only once per property - 3c1e252
Compatibility notes:
- no incompatibilities are to be expected.
Commits

v4.7.0 - January 10th, 2020

Features:
- feat: default options for controlling proto access - 7af1c12, #1635
  
  This makes it possible to disable the prototype access restrictions added in 4.6.0
  
  an error is logged in the console, if access to prototype properties is attempted and denied and no explicit configuration has taken place.
Compatibility notes:
- no compatibilities are expected
Commits

v4.6.0 - January 8th, 2020

Features:
- feat: access control to prototype properties via whitelist (#1633)- d03b6ec
Bugfixes:
- fix(runtime.js): partials compile not caching (#1600) - 23d58e7
Chores, docs:
- various refactorings and improvements to tests - d7f0dcf, 187d611, d337f40
- modernize the build-setup
  
  use prettier to format and eslint to verify - c40d9f3, 8901c28, e97685e, 1f61f21
  
  use nyc instead of istanbul to collect coverage - 164b7ff, 1ebce2b
  
  update build code to use modern javascript and make it cleaner - 14b621c, 1ec1737, 3a5b65e, dde108e, 04b1984, 587e7a3
  
  restructur build commands - e913dc5,
- eslint rule changes - ac4655e, dc54952
- Update (C) year in the LICENSE file - d1fb07b
- chore: try to fix saucelabs credentials (#1627) -
- Update readme.md with updated links (#1620) - edcc84f
... (truncated)
Commits
- 14ba3d0 v4.7.1
- 4cddfe7 Update release notes
- f152dfc fix: fix log output in case of illegal property access
- 3c1e252 fix: log error for illegal property access only once per property
- 0d5c807 v4.7.0
- 1f0834b Update release notes
- 575d877 fix: use "logger" instead of console.error
- 7af1c12 feat: default options for controlling proto access
- 91a1b5d v4.6.0
- 770d746 Update release notes
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
6

chore(deps): bump fstream from 1.0.11 to 1.0.12
Bumps fstream from 1.0.11 to 1.0.12.
Commits
- 4235459 1.0.12
- 6a77d2f Clobber a Link if it's in the way of a File
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
7

chore(deps): bump lodash from 4.17.10 to 4.17.11
Bumps lodash from 4.17.10 to 4.17.11.
Commits
- 0843bd4 Bump to v4.17.11.
- 3ac4b26 Rebuild lodash and docs.
- eaa9f36 Commit package-lock.json.
- 552f94a Lint nits.
- d8ddc1a Add test for indirectly merging Object properties.
- e5f9af5 Remove prototype property check in safeGet().
- 2de676f Ensure placeholder properties are set for fp.convert() results. [closes #3440]
- 278c6dd Cleanup _.merge tests for function properties.
- 79b9d20 Fix inconsistent merging of multiple sources to function property
- 6e62e1e Cleanup ReDoS test.
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

CSS Grid Layout Generator

Roadmap

How to commit

Author

License

Github

Comments(7)

For some reason when using your demo, if I try to insert a row above the very first one, it shows up at the end

add feature - dir="RTL"

add features: paste current css & html

chore(deps): bump lodash.template from 4.4.0 to 4.5.0

chore(deps): bump handlebars from 4.0.12 to 4.7.1

v4.7.1 - January 12th, 2020

v4.7.0 - January 10th, 2020

v4.6.0 - January 8th, 2020

chore(deps): bump fstream from 1.0.11 to 1.0.12

chore(deps): bump lodash from 4.17.10 to 4.17.11

Popular Tag

Related