此页内容

Grid fixed values

鹏展博

294字小于1分钟

2023-08-06

假设我们有一个网格布局，包含一个 aside 和一个 main。 CSS 如下所示：

.wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}

main

由于空间不足，这将在较小的视口尺寸上导致溢出。为避免此类问题，请在使用上述 CSS 网格时始终使用媒体查询。

在视口尺寸较小时，换行显示，在视口尺寸较大时，使用网格布局。

@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

main

调整浏览器窗口大小查看效果。