使用 GRID 在左侧网格一个大盒子，在他右侧网格一个大盒子

【问题标题】：grid one big box on left side and others on right side of him using GRID使用 GRID 在左侧网格一个大盒子，在他右侧网格一个大盒子
【发布时间】：2018-11-17 14:27:02
【问题描述】：

我想知道如何制作如图所示的盒子：

在左侧主框，在右侧 h1 和较小的框。我必须使用 GRID（显示：网格等，而不是 col-2 ..）。有可能吗？

【问题讨论】：

使用前请考虑阅读标签说明

标签： css css-grid

【解决方案1】：

看看以下内容：

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 1px solid green;
}

.rectangle, .square {
  border: 1px solid black;
}

.rectangle {
  grid-row-start: span 3;
}

.square {
  height: 200px;
}

h1 {
  grid-column-start: span 4;
  text-align: center;
}

<div class="grid">
  <div class="rectangle">
  </div>
  
  <h1>Title</h1>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
  
  <div class="square">
  </div>
</div>

【讨论】：