CDL's weekly question! - Positioning of Card items

https://codepen.io/Laing91/pen/raNeyPO I'm trying to achieve the second image, where title is at the top, slightly below it is a brief description of the project, and then at the bottom is the "footer" (skills used, and links). I'm almost there in achieving this, but perhaps there's an easier way I'm not thinking of?
Callum
CodePen
Untitled
...
No description
No description
3 Replies
CDL
CDLOP2mo ago
display: grid;
grid-template-rows: repeat(3, 1fr);
}
display: grid;
grid-template-rows: repeat(3, 1fr);
}
I realize this gets kinda close.
No description
CDL
CDLOP2mo ago
Solved it. grid-template-rows(50px 1fr 50px);
clevermissfox
clevermissfox2mo ago
.parent { display : grid; gap : 1em ; } :parent > footer { margin-block-start: auto;} Or out title and description in a div, so the new div is a sibling to the footer and set space-between. Then add grid and gap to the new div to set the spacing between title and description OR just set/adjust the margin-block-start on the description element

Did you find this page helpful?