css 2列N行, 第一行添加样式

在CSS中，如果你想要创建一个2列布局，并且第一行有特定的样式，你可以使用`grid`、`flexbox`或者是传统的`display: inline-block`或`float`结合`clear`属性来实现。这里我提供两种常见的方法：

**方法一：Grid布局**

.container {
  display: grid;
  grid-rows: auto; /* 自动适应高度 */
}

.first-row {
  grid-area: 'start / start'; /* 或者 '.row1'，根据命名规则 */
  /* 添加第一行的样式，如背景色、边距等 */
  background-color: #f0f0f0;
  padding: 1rem;
}

**方法二：Flexbox布局**

.container {
  display: flex;
  flex-wrap: wrap; /* 使项目换行 */
}

.column {
  flex: 1; /* 等分空间 */
}

.first-row {
  /* 在这里有特定样式 */
  background-color: #f0f0f0;
  padding: 1rem;
  /* 可能需要设置order属性调整顺序 */
  order: -1; /* 如果想让第一行在最上方 */
}

/* 当然，如果第一行不是首行，直接给对应的元素加样式即可 */
/* .column:nth-child(1) 或者 .column:first-child { ... } */