CSS3 多媒体查询、网格布局

CSS3 多媒体查询可以用来根据屏幕宽度调整样式规则，而网格布局（Grid）则可以创建复杂的列和行。以下是一个简单的示例，展示了如何使用这两个功能：

/* 多媒体查询，当屏幕宽度小于600px时应用这些样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  grid-gap: 10px; /* 设置网格间隙 */
}
 
.item {
  background-color: coral;
  padding: 20px;
  text-align: center;
}

HTML 代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

这个例子中，.container 类使用了网格布局，.item 类则定义了网格中的项目。当屏幕宽度小于600px时，背景颜色会变成浅蓝色。这个例子演示了响应式设计的基本原理，并且展示了CSS网格布局的基本用法。