给我一个简易栅格系统并且还能实现响应式布局

好的，我可以给你一个简易的栅格系统，同时支持响应式布局。以下是一个示例代码：

HTML结构：

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Column 1</div>
  <div class="col-12 col-md-6 col-lg-4">Column 2</div>
  <div class="col-12 col-lg-4">Column 3</div>
</div>

CSS样式：

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem;
}

.col-12 {
  width: 100%;
  padding: 1rem;
}

.col-md-6 {
  width: 50%;
  padding: 1rem;
}

.col-lg-4 {
  width: 33.33%;
  padding: 1rem;
}

@media (max-width: 767px) {
  .col-md-6 {
    width: 100%;
  }
  
  .col-lg-4 {
    width: 50%;
  }
}

解释说明：

- `.row` 使用 Flexbox 布局，并使用 `flex-wrap` 属性实现自动换行。
- `.col-*` 定义了栅格的列宽，其中 `*` 表示不同的屏幕尺寸。例如 `col-12` 表示在所有屏幕尺寸下都占据整行，`col-md-6` 表示在中等屏幕尺寸下占据一半宽度，`col-lg-4` 表示在大屏幕尺寸下占据三分之一宽度。
- `padding: 1rem` 用于给栅格之间添加间距。
- `@media` 查询用于在小屏幕尺寸下修改栅格的列宽，例如将 `col-md-6` 修改为占据整行宽度，将 `col-lg-4` 修改为占据一半宽度。

这个栅格系统可以实现灵活的布局，并且支持响应式设计，可以根据不同的屏幕尺寸自动调整布局。