@dannynpham pushed a fix for #11, making the grid default to 1px gap in case there is a gap of zero. This works but there will be small diffs with the real grid the user will generate. This issue tracks a longer term solution by refactoring the GridEditor.

We can move the grid lines out of the GridCell component into a new GridTrack component and render them after the GridCells in the GridEditor (one per column plus one per row using grid-area for placement). The LineName and TrackSize components can go in the new GridTrack component. With this, the outlines will always be above the grid cells background.

If you add a space to a grid area name the class it generates has a space in it which is invalid css.

i/e if I name my area "foo bar" it generates the css...

.foo bar { grid-area: foo bar; }

...which is obiously invalid for this because "bar" would be an element seelctor!

Maybe kebab-case the inputs?

Edit: It seems you already kebab-case the grid-area name inside the grid-template-areas it's just missing from the generated CSS.

At the moment it produces code like this:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: 100px 200px 300px;
  grid-template-areas:
    "a a b"
    "a a c"
    "d d e";
}

However it is much easier to read if the code is formatted like this in grid-template:

.grid {
  display: grid;
  grid-template:
    "a   a   b" 100px
    "a   a   c" 200px
    "d   d   e" 300px /
     1fr 2fr 3fr;
}

Note the additional spaces that you need to add to line up the column widths with the start of the area name.

Also, if a row is auto it doesn’t need a row height specified.

.grid {
  display: grid;
  grid-template:
    "sidebar-L main   sidebar-R" 
    "sidebar-L footer sidebar-R" /
     1fr       4fr    1fr;
}

By moving all the values into the 1 rule you can easily see what value is associated with what column/row as long as the formatting is done right. Making sure the column values line up with the start of all the column names is vital for readability.

The app needs a service worker

Hello,
first of all, thank you for this wonderful tool !

The only thing I am missing is the ability to move or extend already defined grid areas.

When one grid area is saved, there is no way (at least I found none) to make it start at another row/column, or to make it span a different number of rows/columns.

Thanks in advance for taking this into consideration

On smaller screens, some elements in the sidebar become unreachable when the mobile buttons' wrapper is displayed on top.

I think we can add the typical fork-me-in-github ribbon in the top-right

When a nested area is being edited, the properties left sidebar shows only that area properties:

I think it is a good idea to do the same in the right code sidebar, showing only the html and css code for that area

Had a Windows update during my layoutit grid making and lost all the grid elements I had designated. It would be amazing to me and my future work if I was able to import previously generated layoutit grids

https://docs.github.com/en/github/building-a-strong-community/adding-a-code-of-conduct-to-your-project

I think we should adopt https://www.contributor-covenant.org
Simon has a tool to auto generate it https://github.com/sindresorhus/conduct

Something like the simple scrollbars from CodeMirror would be great https://codemirror.net/demo/simplescrollbars.html
What is important is that there isn't a shift when the scrollbar needs to appear.

We are converting to valid a valid css name when generating the code or showing the area name in the editor.
Now that we are also converting to a valid name on user input and not accepting spaces anymore, we could remove refactor the state to trust that it will always be a valid name and avoid having to convert everywhere. It would also be good to add dashes when the user press the space key (in the Code inputs and in the Area Selection name input).

For the visual feedback, maybe a cursor change is enough for the moment

There should be at least two buttons, one for the Props sidebar and one for the Code and clear hints of how they work. Maybe we need a small header in mobile instead of showing the grid covering the whole screen.

It should work in the same way as when editing a size

CSS Grid allows areas to go over each other, using grid-area and line numbers instead of grid-template-areas. The app is correctly detecting this case and the code works fine. But when the cells are being selected to define an area (see SelectionArea.vue), the selection doesn't expand if you are in a cell that already has another area. With the current approach to get the cell from the current pointer position, we need to add a pointer-events:none to at all Areas that are not the one where the selection is being dragged (probably also needs it in the internal GridCells of that areas). See https://github.com/Leniolabs/layoutit-grid/blob/main/src/components/grid/AreaSelection.vue#L91

Another option is to think of another way to get the current GridCell from the pointer position that doesn't interact with elements above the target cells.

Add some test could be good

Allow to interact with the grid gap directly in the code view, in the same way we do for track sizes, line names and area names

We are only using css for nesting, it would be great to remove it and migrate to https://github.com/jonathantneal/postcss-nesting#readme

Add a [ + ] button at the top of each section right to the title. Having it in the bottom makes the button jump when adding a new track

Currently only names in internal lines are allowed

We started using https://github.com/pikax/vue-composable for useLocalStorage. The same hook is present in https://github.com/antfu/vueuse, that also includes usePreferredDark and useDebounceFn (that we could use to remove lodash from our dependencies). Both libraries looks really good, and are mantained by Vue team members.

I think we should migrate to use vueuse, to simplify our dependencies at this point.

Would be great to have a reset button, whenever I am done with a big grid it's a pain to have to manually clear it all to start a fresh

We should add keyboard shortcuts for the main actions:
Cmd+z : undo
Cmd+y | Cmd+Shift+z : redo
Cmd+s : Get Permalink
Cmd+q : reset

When selecting grid cells for a new area (AreaSelection.vue)
Esc: closes selection, or cancels area edition

When area is active
delete : removes the area (or the subgrid if there is one)
c: add column (in the future it can mean, add it where I have the mouse)
r: add row
g: add subgrid in the area

Grid lines are overflowing the main grid container when dragging in non full width grids.

To reproduce, create a grid that doesn't fill the 100% of the width of the application (don't use fr units). Lines with class dragging should not overflow the container.

Can you please publish to npmjs, so we can just add it to dependency managment?

It would be extremely helpful if you had an additional textbox where I could paste in the code for grid-template-areas and have it output the correct IE 10 / IE 11 CSS for -ms-grid-row, -ms-grid-row-span, -ms-grid-column, -ms-grid-column-span, etc for grid-template-areas.

Creating the grid is easy enough visually in grid-template-areas - but trying to make it work in IE 10 / 11 is mind numbing.

Hello,

1. Select for 1fr for first grid row.
2. Select for 1200px for second grid row.
3. Select for 300px for third row.
4. Try to scroll the grid section to view the third grid row.

https://github.com/vuejs/eslint-plugin-vue/blob/master/.editorconfig

We can use useClipboard from vueuse https://vueuse.js.org/?path=/story/browser--useclipboard

Twitter:

LinkedIn:

Image used could be this banner or part of it:

Inspection tools for testing before issue is considered solved
https://cards-dev.twitter.com/validator
https://www.linkedin.com/post-inspector/inspect/grid.layoutit.com

We lost this configuration when we migrated to Vite from vue-cli.

This was the old package.json bits related to this

  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "lint-staged": "^9.0.0",
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }

Looks like we now would have to do something like this though:

https://simohamed.tech/blog/vue3-lint/
https://www.simonwuyts.com/articles/vue-3-a-modern-setup-that-will-save-you-time/

hi, how to save and recovery data by api? (use json)
for example:
saveDesign(data){
....
}
recovery(data){

}

can you give me some cases ,Thanks!

Layoutit Grid got the logo from the original Layoutit

We need a new modern logo to represent this app

I get this error when I try to load the component

import { createApp } from 'vue'
import LayoutEditor from 'layoutit-grid/src/components/LayoutEditor'
// ...
createApp(LayoutEditor).mount("#apppp")

Seems like the function is in vue/compat but my browser cannot resolve it.

I am using Laravel mix for the webpack configuration.

I tried to resovle vue to vue-compat, but not sure if that did work correctly:

mix.webpackConfig({
    resolve: {
        alias: {
            vue: '@vue/compat'
        }
    }
});

We can use CodeSandbox Define API to create vanilla sandboxes:

https://codesandbox.io/docs/api#define-api

I think that people will prefer one of the options (Codepen, CodeSanbox, later other options?), and only use that one when using the app. There should be a way to select this preference and save it in local storage. Only one Export button will be shown in this way avoiding cluttering the UI

Allow to import existing html/css into the grid, this way can modify a previous created(with the app or manually) grid.

An optional awesome feature can be maintain the not grid related props (like background, padding) of imported css and attrs (id, class, data-...) in html.

We could have a currentHover ref in the same way that we have a currentFocus ref in store.js to track focus of track and line names focus, so we can highlight those tracks in the sidebar, code editor and inline inputs in the GridEditor.

• When hovering in a track size/unit in the sidebar, then highlight that track (and its size) in the GridEditor and in the Code Editor
• When hovering in a track size in the GridEditor, then highlight that track size/unit in the sidebar and in the Code Editor
• When hovering in a track size in the Code Editor, then highlight that track size/unit in the sidebar and the track (and its size) in the GridEditor.
• When hovering in a GridCell, highlight both the column and row tracks for that cell (and their sizes in the sidebar, GridEditor and Code Editor)

We probably need to use a lighter color for hover than the active color that is used for focus (or maybe just another color, we can play with that later)

Important: When we are currently focused in a track size (currentFocus is of type track), we may need to ignore the hovering queues if they are confusing what is actually active. An example is to focus on a track size in the code editor, edit it and press Tab to go to the next. The mouse is still on the previous one, so the hover queue will actually be unhelpful there. I think this is the only place where this is an issue, so maybe we just need to avoid setting currentHover in CssCodeTrackSize if currentFocus is on one of them (for this bit, we may need to extra metadata to the currentFocus).

Hi,

A feature request for an already great tool:
The option to design for multiple device sizes and orientations at once and then the choice to export all the needed responsive styles.

For navigation on the main grid or in the subgrid of a selected area:
Arrow right: move the hover to the right cell
Arrow left: move the hover to the left cell
Arrow down: move the hover to down cell
Arrow up: move the hover to up cell

In addition to its current functionality:
Esc: cancels the edit column or row name separator
c: add a column where I have the hover
r: add a row where I have the hover

New Actions:
Espace: select an area to edit or select an empty area to create
Shift + c: remove the column from the current hover cell
Shift + r: remove the row from the current hover cell
Shift + g: clean the area if it has a subgrid
Ctrl + c: copy the generated ccs code

This can be other PR:
Shift + arrow right: select column separator right
Shift + arrow left: select column separator left
Shift + arrow down: select row separator down
Shift + arrow up: select row separator up

When the row or column separator is select:
Espace: edit separator name
Arrow right: add width to the column left and remove width to the column right
Arrow left: add width to the column right and remove width to the column left
Arrow down: add height to the row up and remove height to the column down
Arrow up: add height to the row down and remove height to the column up

Hello,
Selecting "auto" as the value of a column/row generates incorrect css: 1auto instead of auto.

Steps to reproduce:

• Go to https://grid.layoutit.com/
• Select "auto" for the first column

Generated css:

.grid-container {
  display: grid;
  grid-template-columns: 1auto 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . . ."
    ". . . ."
    ". . . .";
}

Expected css:

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr; // difference is here
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . . ."
    ". . . ."
    ". . . .";
}

See #91 (comment)

• change color on hover to darker blue once an item is selected, so the user knows it can click on the selected one to go back to initial
• don't close the options when going back to initial. The options should collapse by clicking on the title (collapsing with local state).

We could rename the CssCodeAreaName component to CodeAreaName so we can also use it in the class name of each div

When you change a unit, the size is updated to 1fr, 300px, 10%, 4em. We should try to compute a new value for the track size that gives the same approximate size, but with the new unit. It doesn't need to be exact.

when filling sizes and magnitudes I would like to navigate through them using tab and shift + tab. Today, when pressing these keys, the behavior is somewhat unexpected.

We are going to add more features and we need a good set to move forward

We need to save the preference to local storage. It would be interesting to also considering adding another state that uses the default setting for dark/light from the browser.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme