JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrapper">
  <div class="full header">
    <div class="inner">header</div>
  </div>
  <div class="content">
    <div class="inner">content</div>
  </div>
  <div class="full full-bleed">
    <div class="inner body-content">content</div>
  </div>
  
  <div class="content-full-end">
    <div class="inner">content full end</div>
  </div>
  <div class="content-full-start">
    <div class="inner">content full start</div>
  </div>
  
  <div class="content-full-end">
    <div class="body-content">
      content
    </div>
  </div>
  <div class="content-full-start">
    <div class="body-content">
      content
    </div>
  </div>
  
  <div class="full footer">
    <div class="inner">footer</div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.wrapper {
  --max-content: 600px;
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] minmax(auto, var(--max-content)) [content-end] 1fr [full-end];
  grid-row-gap: 15px;
  > * {
    > * {
      padding: 40px 30px;
    }
  }
}

.header,
.footer {
  background: #B01E68;
}
.full-bleed {
  background: #497174;
}
.full {
  grid-column: full;
  /* grid-column-start: full-start;
  grid-column-end: full-end; */
}
.content {
  grid-column: content;
  /* grid-column-start: content-start;
  grid-column-end: content-end; */
  background: #FFE15D;
}
.body-content {
  display: flex;
  max-width: var(--max-content);
  background: #D6E4E5;
  /* margin: 0 auto; */
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.content-full-start {
  grid-column-start: content-end;
  grid-column-end: full-start;
  background: #F49D1A;
  .body-content {
    /* margin-right: 0;
    margin-left: auto; */
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
}
.content-full-end {
  grid-column-start: full-end;
  grid-column-end: content-start;
  background: #DC3535;
  .body-content {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}