@beqarion
Posted
Thanks! buttons are little bit fat thoughπ
Well I used grid 3 places there.
- main element
Just for centering. I could use flexbox but I feel comfortable with grid and did so. Allmost same amount of code would be required for flex too.
- cards container
When I have to change elements orientation I try to always use grid, dont like flexbox flex-direction, because It feels littlebit complex for me if it needs further adjustments
- In Card itself on widescreen
Here I had biggest reason using grid for controlling height of elements in card: Because the card has fixed height (min-height: 500px
), if elements inside it had auto height, most likely there would be leftover white space at the end of the card component. In Figma design, card at the bottom doesn't have empty space. the only element in there has opportunity to grow is the card-text element. So I set grid-template-rows: auto auto 1fr auto
.
Also, at this time I'm more used to grid than flex so I don't really remember more complex flex commands like flex-grow
and etc. I use flex only for centering or layouts like space-between
.