代码之家 › 专栏 › 技术社区 › KulaGGin

如何使用CSS网格和/或/或不使用Flexbox使自适应响应灵活的标题?

css-grid css

KulaGGin · 技术社区 · 6 年前

我想做的是:

自适应响应头,所以它看起来很好,在400-1920像素的视窗宽度。
当视窗宽度大于640px时,我希望logo在左侧,phone和basket模块在右侧,如上图所示。
当视口宽度为480-640px时,我希望phone和basket组件都位于第二行,并且希望它们的边到外部边界的距离相同,如下所示:

默认情况下,当视口宽度小于480px时,我希望logo位于第一行,phone位于第二行,basket位于第三行,如下所示:

我做不到,所以它符合所有的要求。以下是迄今为止我想到的最好的: https://next.plnkr.co/edit/9nHCyGk2KC8ZO9JA?preview

我可以交换电话和篮子,但不是电话和标志,而不是篮子和标志。如果我移除 <div class="pg-Header_phoneBasketContainer"> 元素并应用 grid-area: phone grid-area: basket 直接放在电话和篮子上,这样我就不能使电话和篮子边缘到外部边界的距离相同,因为第二行有两个单元格,它会相对单元格定位网格项,而这些项的长度不同,所以到边界的距离也会不同。

grid-template-areas 对于容器和适当的 grid-area 的属性 .pg-Header_phoneBasketContainer , .pg-Header_phone 和 .hdr-Basket

.hdr-Top {
display: grid;
grid-template-areas: "logo phoneBasket";

}
.pg-Header_logo {
    grid-area: logo;
}
.pg-Header_phoneBasketContainer {
    grid-area: phoneBasket;
}

@media only screen and(max-width: 480px) {
    .hdr-Top {
        display: grid;
        grid-template-areas: "phone" "logo" "basket";
    }
    .pg-Header_phone {
        grid-area: phone;
    }
    .hdr-Basket {
        grid-area: basket;
    }
}

这将导致在更大的屏幕上:

这是小号的:

不幸的是, CSS Grid doesn't allow grid positioning of indirect children

1 回复 | 直到 6 年前

fen1x 6 年前

你不能分裂 phoneBasket logo

grid-template-areas 属性:

.header {
  padding: .25rem;
  border-bottom: 1px solid #333;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "logo phone basket";
  align-items: center;
  grid-gap: .5rem;
}

.header-item {
  padding: .5rem;
  background-color: #ccc;
}

.logo {
  font-weight: 700;
  text-transform: uppercase;
  grid-area: logo;
}

.phone {
  grid-area: phone;
}

.basket {
  border: 2px solid #999;
  grid-area: basket;
}

@media (max-width: 640px) {
  .header {
    grid-template-areas: "logo logo" "phone basket";
    grid-template-columns: auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header {
    grid-template-areas: "phone" "logo" "basket";
  }
}

<div class="header">
  <div class="header-item logo">MyCompany</div>
  <div class="header-item phone">555-3535</div>
  <div class="header-item basket">3 items</div>
</div>