css - 如何使用 CSS Grid 和/或/不使用 Flexbox 制作自适应响应式灵活标题？

Question

好的，所以我的标题模块有一个徽标、一个电话组件和一个购物篮组件。这是标题：

这就是我想要做的：

1. 自适应响应标题，因此它在 400-1920 像素的视口宽度上看起来很好。
2. 能够以任何顺序重新排序所有标题组件。
3. 当视口宽度大于 640 像素时，我希望徽标位于左侧，电话和购物篮模块位于右侧，如上图所示。
4. 当视口宽度为 480-640px 时，我希望手机和购物篮组件都位于第二行，并且我希望从它们的边缘到外部边界的距离相同，如下所示：

4. 默认情况下，当视口宽度小于 480 像素时，我希望徽标位于第一行，电话位于第二行，篮子位于第三行，如下所示：

5. 但我希望能够在不编辑 html 的情况下交换徽标和电话组件，使其看起来像这样：

我做不到，所以它满足所有要求。这是迄今为止我想出的最好的： https ://next.plnkr.co/edit/9nHCyGk2KC8ZO9JA?preview

我可以交换电话和篮子，但不能交换电话和标志，也不能交换篮子和标志。如果我<div class="pg-Header_phoneBasketContainer">从 html 中删除元素并相应地直接应用grid-area: phone到grid-area: basket手机和篮子上，那么我不能使从手机和篮子边缘到外边界的距离相同，因为第二行中会有 2 个单元格并且它会定位网格项目相对于它们的单元格，并且这些项目的长度不同，因此到边框的距离会有所不同。

如果我可以在网格容器的间接子项上使用网格定位，那么使用网格区域可以轻松完成。我只想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 不允许间接子元素的网格定位。有什么想法可以实现我在这里想要实现的目标吗？

标签： csscss-grid

Answer 1

您不能将小屏幕分开phoneBasket并放在logo中间 - 但您可以通过 1 个容器和 3 个孩子来实现您想要的。

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>