Add precise resizing mode for card inside section

[piitaya]

Breaking changes

The layout options as changed for multiple reasons :

• Only grid layout is supported for now so we don't really need a generic object for layout options.
• simplify the YAML config with shorter property names
• check if a card is using a legacy size (4 column based) to migrate it.

As the result of this change, there will be not breaking change for users using sections.

Old config

layout_options:
  grid_columns: 1
  grid_rows: 2

New config

grid_options:
  columns: 3 # Multiplied by 3 to have the same size at the end.
  rows: 2 # Row is unchanged

Proposed change

Use 12 columns layout for card resizing. It will allow the usage of 6 button card in on row or 3 vertical tiles one next to each other.
The editor will still display 4 columns by default as it's the more common use-case.

Screenshots

Section

Editor (precise mode disabled)

Editor (precise mode enabled)

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Madelena]

Amazing! 😄