Product preview card component solution using flexbox

Is it reasonable to use flexbox or css grid in place of other things such as floats or position divs etc? I like the technologies but find myself preferring them when maybe a simple solution would work too.

What is the convention on naming class and sub-classes with sass? I've tried to use class="card", class="card-inner" and card { &-inner { ..... } } which works well but struggle with names that would be under those. Is there a better way?