Add grid layout options. Bugfixes

README.md

@@ -27,6 +27,8 @@ column_width: <column_width>
 max_width: <max_width>
 min_width: <min_width>
 flex_grow: <flex_grow>
+gridcols: <grid-cols>
+gridrows: <grid-rows>
 justify_content: <justify_content>
 rtl: <rtl>
 cards:
@@ -38,12 +40,13 @@ card_options:
 ## Options
 - `<cards>` **Required** A list of lovelace cards to display.
 - `<card_options>` are options that are applied to all cards.
-- `<layout>` The layout method to use. `auto`, `vertical` or `horizontal`. See below. Default: `auto`.
+- `<layout>` The layout method to use. `auto`, `vertical`, `horizontal` or `grid`. See below. Default: `auto`.
 - `<min_height>` The minimum length of a column in `auto` layout. Default: `5`.
 - `<min_columns>` The minimum number of columns to use. Default: `1`.
 - `<max_columns>` The maximum number of columns to use. Default: `100`.
 - `<column_width>` Width of columns. Default: `300px`.
 - `<max_width>`, `<min_width>`, `<flex_grow>` Set the `max-width`, `min-width` and `flex-grow` CSS properties of the columns manually. Default: `column_width or 500px`, `undefined`, `undefined`.
+- `<grid-rows>`, `<grid-col>` Set the `grid-template-rows` and `grid-template-columns` CSS properties when using `layout: grid`.
 - `<justify_content>` Set the `justify-content` CSS property of the column container. Default: `center`.
 
 ## Layouts
@@ -180,6 +183,52 @@ cards:
 ```
 ![layout-card 4 - manual breaks](https://user-images.githubusercontent.com/1299821/48088461-62312500-e202-11e8-96ab-e4f560f8d4fc.png)
 
+### `grid` layout (experimental)
+
+For maximum controll, you can place every card manually in a [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by using the `grid` layout.
+
+To do this, you need to specify `gridrows` and `gridcols` with the settings for `grid-template-rows` and `grid-template-columns` repectively **and** also add `gridcol:` and `gridrow:` for *each card* with the settings for `grid-column` and `grid-row` respectively.
+
+> Hint: This may look better if you also have [card-mod](https://github.com/thomasloven/lovelace-card-mod) and set the card heights to `100 %`.
+
+```yaml
+type: custom:layout-card
+layout: vertical
+column_width: 100%
+cards:
+  - type: markdown
+    content: "# Grid"
+  - type: custom:layout-card
+    layout: grid
+    gridrows: 180px 200px auto
+    gridcols: 180px auto 180px
+    cards:
+      - type: glance
+        entities:
+          - sun.sun
+        gridrow: 1 / 2
+        gridcol: 1 / 2
+        style: "ha-card { height: 100%; }"
+      - type: entities
+        entities: &ents
+          - light.bed_light
+          - light.kitchen_lights
+          - light.ceiling_lights
+        gridrow: 1 / 3
+        gridcol: 2 / 4
+        style: "ha-card { height: 100%; }"
+      - type: markdown
+        content: test
+        gridrow: 2 / 4
+        gridcol: 1 / 2
+        style: "ha-card { height: 100%; }"
+      - type: entities
+        entities: *ents
+        gridrow: 3 / 4
+        gridcol: 2 / 3
+```
+![layout-card - Grid](https://user-images.githubusercontent.com/1299821/71694902-e3f1f380-2db0-11ea-82f1-8f880a2fbb24.png)
+
 ## Tweaking layouts
 
 - First of all `<min_columns>` and `<max_columns>` options, which can be used to force the number of columns displayed:

src/layout.js

@@ -79,6 +79,7 @@ export function buildLayout(cards, width, config) {
   for (let i = 0; i < colnum; i++) {
     const newCol = document.createElement("div");
     newCol.classList.add("column");
+    newCol.classList.add("cards");
     newCol.length = 0;
     cols.push(newCol);
   }

src/main.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "card-tools/src/lit-element";
 import "card-tools/src/card-maker";
+import { createCard } from "card-tools/src/lovelace-element";
 import { hass } from "card-tools/src/hass";
 
 import {buildLayout} from "./layout";
@@ -62,13 +63,20 @@ class LayoutCard extends LitElement {
   async build_card(c) {
       if(c === "break")
         return null;
-      const el = document.createElement("card-maker");
-      el.config = {...c, ...this._config.card_options};
+      const config = {...c, ...this._config.card_options};
+      const el = createCard(config);
       el.hass = hass();
+
+      el.style.gridColumn = config.gridcol;
+      el.style.gridRow = config.gridrow;
       // Cards are initially placed in the staging area
       // That places them in the DOM and lets us read their getCardSize() function
       this.shadowRoot.querySelector("#staging").appendChild(el);
-      return new Promise((resolve, reject) => el.updateComplete.then(() => resolve(el)));
+      return new Promise((resolve, reject) =>
+        el.updateComplete
+          ? el.updateComplete.then(() => resolve(el))
+          : resolve(el)
+        );
   }
 
   async build_cards() {
@@ -83,6 +91,8 @@ class LayoutCard extends LitElement {
   }
 
   place_cards() {
+    if(this._config.layout === "grid")
+      return;
     const width = this.shadowRoot.querySelector("#columns").clientWidth;
 
     this.columns = buildLayout(
@@ -141,7 +151,7 @@ class LayoutCard extends LitElement {
     if(this.isPanel) return true;
     let el = this.parentElement;
     let steps = 10;
-    while(steps--) {
+    while(steps-- && el) {
       if(el.localName === "hui-panel-view") return true;
       if(el.localName === "div") return false;
       el = el.parentElement;
@@ -150,6 +160,15 @@ class LayoutCard extends LitElement {
   }
 
   render() {
+    if(this._config.layout === "grid")
+      return html`
+        <div id="staging" class="grid cards"
+        style="
+        display: grid;
+        grid-template-rows: ${this._config.gridrows};
+        grid-template-columns: ${this._config.gridcols};
+        "></div>
+      `;
     return html`
       <div id="columns"
       class="
@@ -190,18 +209,19 @@ class LayoutCard extends LitElement {
         overflow-x: hidden;
       }
 
-      card-maker>* {
+
+      .cards>* {
         display: block;
         margin: 4px 4px 8px;
       }
-      card-maker:first-child>* {
+      .cards>*:first-child {
         margin-top: 8px;
       }
-      card-maker:last-child>* {
+      .cards>*:last-child {
         margin-bottom: 4px;
       }
 
-      #staging {
+      #staging:not(.grid) {
         visibility: hidden;
         height: 0;
       }