使用 grid+媒体查询做响应式的例子

最新推荐文章于 2024-07-21 17:23:08 发布

时光之里

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量363

点赞数

分类专栏： css 文章标签： grid布局 grid-template-rows grid-column grid-gap

本文链接：https://blog.csdn.net/m_review/article/details/88954125

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用 grid+媒体查询做响应式

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.wrapper {
  /* 使用网格布局 */
  display: grid;
  /* 行和列的间距 */
  grid-gap: 10px; 
  /* 分为三行，每行高度50px */
  grid-template-rows: 50px 50px 50px;
}
.wrapper > div:nth-child(1) {
  background-color: aquamarine;
}
.wrapper > div:nth-child(2) {
  background-color: blanchedalmond;
}
.wrapper > div:nth-child(3) {
  background-color: chartreuse;
}
/* 最小宽度 1200px  */
@media (min-width: 1200px) {
  .wrapper {
  	/* 分为3列，每列宽30% */
    grid-template-columns: 30% 30% 30%;
  }
}
/* 最小宽度 768px */
@media (min-width: 768px) and (max-width: 1199px) {
  .wrapper {
  	/* 分为2列，每列宽45% */
    grid-template-columns: 45% 45%;
  }
  .wrapper > div:nth-child(3) {
  	/* 当前列从第1个网格开始到第3个网格结束 */
    grid-column: 1 / 3;
  }
}
/* 最小宽度 480px */
@media (min-width: 480px) and (max-width: 767px) {
  .wrapper {
  	/* 分为1列，每列100%宽 */
    grid-template-columns: 100%;
  }
}