@m1mmseen
Posted
You should try to nest the css grids. For example an outer grid like:
display: grid;
grid-template-areas: bigPicture bigPicture asideContent’
‘title textWithButton asideContent’
‘bottomContent bottomContent bottomContent‘
then you can set the area to a css selector for example:
.myDiv { grid-area: buttonContent;}
you can now style the content inside this div for example like usual.
For the bottom content you can try:
display: flex;
flex-direction: row;
justify-content: space-around; (or just play around with the other “space-“values
align-items: center;
Always think about the properties of the parent. They can cause unexpected behavior of the childs!
Or you can nest another three column grid inside the bottomContent row.
See also the short but good documentation here on W3schools
Marked as helpful
