栅格布局

<section class="layout grid">
  <article class="left-center-right">
    <div class="left">我是 left</div>

    <div class="center">
      <h1>网格布局解决方案</h1>我是 center
    </div>

    <div class="right">我是 right</div>
  </article>
</section>


.layout.grid .left-center-right {
  display: grid;
  width: 100%;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
}

.layout.grid .left {
  background: red;
}

.layout.grid .center {
  background: green;
}

.layout.grid .right {
  background: blue;
}