如何用html和css制作成比例的4列布局

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1; /* 每个列等宽 */
  padding: 20px;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 创建4列，每列等宽 */
  gap: 10px; /* 列之间的间距 */
}

.column {
  padding: 20px;
  border: 1px solid #ccc;
}