grid-container icon indicating copy to clipboard operation
grid-container copied to clipboard

Published 20 hours ago • verified publisher icon charbelrami

grid fails to pass as a variable

Open GHNewbiee opened this issue 3 years ago • 0 comments

I face a small problem while trying to pass grid as a variable.

index.html

...
  <body>
    <my-element
        grid1="'. .   a   . .' min-content
               '. .   b   . .' min-content
               'c d frame e f' max-content
               '. .   g   . .' min-content
               '. .   h   . .' min-content"

        grid2="'. .   a   . .' min-content
               '. .   b   . .' min-content
               'c d frame e f' max-content
               '. .   g   . .' min-content
               '. .   h   . .' min-content / repeat(2, min-content) max-content repeat(2, min-content)"

        grid3="'. .   a   . .' min-content
               '. .   b   . .' min-content
               'c d frame e f' max-content
               '. .   g   . .' min-content
               '. .   h   . .' min-content
             / repeat(2, min-content) max-content repeat(2, min-content)">
    </my-element>
  </body>

my-element.js (LitElement)

...
  render() {
    return html`
      <grid-container grid=${this.grid}>
        ...
      </grid-container>

grid1 passes but grid2 and grid3 fails, i.e. a, b, g and h row heights are the minimum as should be BUT c, d, e and f column widths are unfortunately not! It seems that the string / repeat(2, min-content) max-content repeat(2, min-content) is ignored. Tia

GHNewbiee avatar Oct 09 '20 15:10 GHNewbiee