KE_wp-grid-box

by sthag

HTML

<div class="oy-wrap">
  <div class="left">
    <h3>Titel</h3>
    <p>Absatz</p>
    <ul>
      <li>Punkt 1</li>
      <li>Punkt 2</li>
    </ul>
  </div>
  <div class="plus">➕</div>
  <div class="top">rechts oben</div>
  <div class="bottom">rechts unten</div>
</div>

SCSS

.oy-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1.5fr;
  grid-template-areas:
    "left middle right-top"
    "left middle right-bottom";
  gap: 8px;

  & > div {
    padding: 16px;
    background-color: grey;
  }

  .left {
    grid-area: left;
  }

  .plus {
    grid-area: middle;
    display: flex;
    align-items: center;
  }

  .top {
    grid-area: right-top;
  }

  .bottom {
    grid-area: right-bottom;
  }
}