#Grid template rows/columns

1 messages · Page 1 of 1 (latest)

random fossil
#

I am trying to understand the following grid layout.
If I understand correctly, the px setting, for example in the rows, defines the number of pixels that the card that is specified will us from top to bottom of the card. But it appears the cards I've used have a minimum size and specifying something below that causes the following row to overlap.

          margin: 0px
          padding: 0px
          grid-template-rows: 78px 176px 128px 312px 160px
          grid-template-columns: 150px 150px 150px 150px
          grid-template-areas: |
            "pc1 pc1 pc1 pc1"
            "pw2 pw2 pw2 pw2"
            "pout1 pout2 pout2 pout2"
            "phor1 phor1 phor1 phor1"
            "pliv1 pliv1 pdin1 pdin1"

Please let me know if I'm posting in the wrong place about grids...

pure hedge
random fossil
#

That' what I thought, but some cards seem to ignore the row size. Like the weather card and horizon card.

pure hedge
#

they all likely have minimum sizes

#

you're setting the size of the container, not the size of the card

#

the card goes in the grid spot, the "Container".

#

Also, for all intents and purposes, you should never hardcode pixel sizes

random fossil
#

I tried percentages and they didn't seem to achieve the desired result. And, apparently my thinking cards scaled to the specified values is wrong.