JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<div class="p-edit">
  <div class="p-edit__header">
    <p>Header</p>
  </div>
  <div class="p-edit__toolbar">
    <p>toolbar</p>
  </div>
  <div class="p-edit__editor">
    <p>editor</p>
  </div>
  <div class="p-edit__details">
    <p>details</p>
  </div>
</div>

SCSS

.p-edit {
  position: relative;
  display: grid;
  // 全体 - (ツールバー + コメント + gap + padding)
  grid-template-columns: 50px minmax(calc(100vw - (50px + 362.5px + 40px + 40px)), 100%) 362.5px;
  grid-template-rows: 90px auto;
  column-gap: 10px;
  row-gap: 10px;
  height: calc(100vh - 72px);
  padding: 0 10px 10px 0;
  margin-bottom: 21px;
  @media screen and (max-width: 1080px) {
    height: calc(100vh - 63px);
  }
  @media screen and (max-width: 768px) {
    height: calc(100vh - 50px);
    grid-template-columns: repeat(2, 100%);
    grid-template-rows: 90px auto 50px;
  }
  &__header {
    grid-column: 1/-1;
    grid-row: 1/2;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 1;
    @media screen and (max-width: 1080px) {
      top: 63px;
    }
    @media screen and (max-width: 768px) {
      top: 50px;
    }
  }
  &__toolbar {
    grid-column: 1/2;
    grid-row: 2/3;
    @media screen and (max-width: 768px) {
      grid-column: 1/-1;
      grid-row: 3/4;
    }
  }
  &__editor {
    position: relative;
    grid-column: 2/3;
    grid-row: 2/3;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
    @media screen and (max-width: 768px) {
      grid-column: 1/-1;
      grid-row: 2/3;
    }
  }
  &__details {
    grid-column: 3/4;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 175px auto;
    row-gap: 10px;
    width: 100%;
    height: 100%;
    @media screen and (max-width: 768px) {
      position: fixed;
      grid-column: 1/-1;
      grid-row: 2/3;
    }
  }
}