編輯問題，以包括預期行為、特定問題或錯誤以及重現問題所需的最短代碼。這將有助于其他人回答問題。

###

給定的形狀應該能夠通過使用內嵌塊元素和少量計算來實現。

.inline {
  width: 800px;
  margin: auto;
  padding: 20px;
  padding-right: 0;
  background-color: #eee;
}

.inline > div {
  background-color: #ddd;
  font-family: sans-serif;
  font-size: 24px;
  text-align: center;
  height: 60px;
  display: inline-grid;
  place-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.inline > .col--full {
  width: calc(100% - 20px);
  margin-top: 0;
}

.inline > .col--2 {
  width: calc((100% - 2 * 20px) / 2);
}

.inline > .col--3 {
  width: calc((100% - 3 * 20px) / 3);
}

.inline > .col--4 {
  width: calc((100% - 4 * 20px) / 4);
}

<div class="inline">
  <div class="col--full">Full Width</div>
  
  <div class="col--3">1/3</div>
  <div class="col--3">1/3</div>
  <div class="col--3">1/3</div>
  
  <div class="col--2">1/2</div>
  <div class="col--2">1/2</div>
  
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
  <div class="col--4">1/4</div>
</div>