What the devil does this have to do with table layouts, where the rows and columns have semantic relationships?

Why the outer DIV for nothing? Why are you using DIV+ID to do actual tags like HEADER, MAIN, and SECTION's job? Why are you using the HTML 4 charset and content declaration in a 5 document? Where's your MEDIA target or do you really intend to send your screen media layout to aural, braille, and print? (and search)

Why are you creating a broken layout by using vw/vh instead of %, meaning you don't compensate for scrollbar widths?

Why the insade font-weight and telling large swaths of users to go plow themselves by declaring font-size in pixels? They're called EM/REM, use 'em!

Also since your code snippets are incomplete, it probably wouldn't have hurt to put a live demo someplace like codepen, and shown how to ACTUALLY make it responsive since you've got nothing of the sort present.

Which is the pure comedy, on top of all the glaring flubs, what you have shown us is neither a table, or responsive since I see no min-width restriction or code to change out the number of columns on small displays. Things that if you had present could kill off the middle set of your grid-template-areas.