Trying to use grid over flex-box in my own work, how would you do this?
Hey there, I'm trying to use grid more in my workflow over flex simply for getting used to it and getting enough experience using it to know when I should opt for grid.
What is the best way to achieve the following?
- I want to preserve this fraction of on desktop browsers as you see in the image.
- I would like to have a mobile friendly version of this which uses a different fraction of space.
- I would like to include a button below that is centered but isn't part of this obvious grid structure unless I dedicate a part of my grid to it
How would you go about it? I have a codepen that shows a quick and dirty try at using grid. It would be nice to be skilled on using grid so I can feel comfortable working with it, as I also need to translate this into Tailwind at my new job - and I am not really loving it so far.
Here is the codepen: https://codepen.io/SoulSkrix/pen/poXdMPp?editors=1100
2 Replies
I fail to see where you would need to use either grid of flex for such a layout. The only grid/flex I would use there is to center the main container on both axis
Everything else can be done without touching any display prop
The card itself is just a stack of elements, and by default block elements (like headings, paragraphs, and lists) stack vertically. You just need a max with on the card, and maybe some margin on the internal elements but that's it
You should not use grid or flex for this kind of layout because there is :
- no structural constraints of size for the elements outside of the length of the text
- no constraint from one element to its siblings regarding in-axis sizing (so no need for flex)
- no visually apparent grid in the disposition of the elements (so no need for grid)
Align-content on its parent will now center vertically on a block element , don’t even need display flex or grid on the parent for that ! Then margin-inline: auto on the container itself