Grid Layout

とてもわかりやすい記事がありましたので、以下のサイトを見ながら進めていきます。

補足

セマンティックについて

セマンティックHTMLまたはセマンティックマークアップは、単なる表示ではなく、Webページに意味を導入するHTMLです。
これらを正しく使用することで、ページとそのコンテンツの意味がブラウザに明確になります。その明確さは検索エンジンにも伝達され、適切なクエリに対して適切なページが配信されるようになっています。