Angular 11中的两列

<!-- app.component.html -->
<div class="container">
  <div class="column left-column">
    <!-- 左侧内容 -->
  </div>
  <div class="column right-column">
    <!-- 右侧内容 -->
  </div>
</div>

/* app.component.css */
.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
}

.left-column {
  background-color: #f0f0f0;
}

.right-column {
  background-color: #d0d0d0;
}

<!-- app.component.html -->
<div class="grid-container">
  <div class="grid-item left-column">
    <!-- 左侧内容 -->
  </div>
  <div class="grid-item right-column">
    <!-- 右侧内容 -->
  </div>
</div>

/* app.component.css */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 10px;
}

.grid-item {
  padding: 10px;
}

.left-column {
  background-color: #f0f0f0;
}

.right-column {
  background-color: #d0d0d0;
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 单列布局 */
  }
}