JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
<div id="logo">
ロゴ
</div>
<div id="articles">
記事のリスト
<div style="height: 50em"><!-- コンテンツ代わり --></div>
</div>
<div id="categories">
カテゴリー
</div>
<div id="experts">
エキスパート紹介
</div>
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</body>

CSS

/* 部分部分のスタイル */
body { background-color: #e6e6e6 }
div { background-color: #fff }

/* レイアウト */
body {
  margin: 0;
  padding: 15px 0 0;
  
  display: grid;
  grid-template-columns: 1fr 290px 415px 290px 1fr;
  grid-template-rows: 210px 60px 1fr 100px;
  grid-gap: 15px;
}

#logo {
  grid-column: 2 / 3;
}

#experts {
  grid-column: 3 / span 2;
}

#articles {
  grid-column: 2 / span 2;
  grid-row-start: 3;
}

#categories {
  grid-column: 2 / span 2;
  grid-row: 2 / 3;
}

#sidebar {
  grid-column: span 1 / -2;
  grid-row: 2 / -2;
}

#footer {
  grid-column: 1 / -1;
  grid-row: span 1 / -1;
}