css四个元素四列，二列，一列自适应排列

在CSS中，你可以使用一些弹性布局（Flexbox）或者网格布局（Grid）来实现元素的自适应四列、两列和一列排列。这里分别给出两种方法：

**1. 使用Flexbox：**

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

.item {
  flex: 1 0 33.3%; /* 初始宽度1/4，撑满可用空间 */
}

/* 当屏幕变窄时，自动调整为两列 */
@media (max-width: 600px) {
  .item {
    flex: 1 0 50%; /* 切换到1/2的宽度 */
  }
}

/* 当屏幕更窄时，自动调整为一列 */
@media (max-width: 300px) {
  .item {
    flex: 1; /* 占据所有剩余空间，无固定宽度 */
  }
}

**2. 使用CSS Grid：**

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 初始四列等宽 */
  gap: 10px; /* 列间间距 */
}

/* 当屏幕小于600px时，转换为两列 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当屏幕小于300px时，转换为一列 */
@media (max-width: 300px) {
  .container {
    grid-template-columns: 1fr; /* 单列模式 */
  }
}

以上代码中，`.container`是容器，`.item`是需要排列的元素。通过媒体查询（Media Queries），可以根据设备视口的宽度调整布局。