主页 / 问题 / 1224301
Accepted
Majestio
Asked:2021-12-27 04:04:26 +0000 UTC2021-12-27 04:04:26 +0000 UTC

网格布局中的比例宽度填充

  • 772

有这个标记使用grid：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.wrapper > div {
  background: gray;
  text-align: center;
  margin: 1px;
}
<div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

在某些时候，最后两个块会换行到第二行。可以添加什么以使转移的块开始按比例占据 50% 的整个宽度而不诉诸flex？

在此处输入图像描述

html

2 个回答

  1. Best Answer

    没有解决方案flex-*

    在此处输入图像描述

    如果您需要适应性，那么最好设置没有固定大小的列。内容大小通常以其容器的相对单位设置。

    @media当您使屏幕小于某个值时，您需要添加一种样式，该样式将更改最后两个元素。

    在示例中，为了清楚起见，我使用了屏幕分割grid-template-columns: repeat(5, 1fr);，因为。每个元素默认占用 1 列。

    最好看一个例子CodePen。

    当你缩小浏览器窗口时，屏幕会被分成 12 个部分，因为。12 可以被 3 和 2 整除（第一行 - 3 个元素，第二行 - 2 个元素）。最后 2 个元素会到第 2 行并占据其宽度的 6/12（12/2 个元素），而第 1 行的其余元素将平分第 1 行，即 将占据其宽度的 4/12（元素的 12/3）。

    @media screen and (max-width: 768px) {
    .wrapper{
        grid-template-columns: repeat(12, 1fr) !important;
    }
    .wrapper>div.col-50 {
        grid-column: span 6;
        grid-row: 2;
    }
    .wrapper>div{
        grid-column: span 4;
    }
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.wrapper > div {
    background: gray;
    text-align: center;
    margin: 1px;
    flex: 1 1 200px;
}
    <div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>С</div>
  <div class="col-50">D</div>
  <div class="col-50">E</div>
</div>

    • 6

  2. 另一种选择是使用 flex

    .wrapper {
   display: flex;
   flex-wrap: wrap;
}
.wrapper > div {
   flex: 1 1 200px;
}

.wrapper > div {
  flex: 1 1 200px; /* 100px */
  background: gray;
  text-align: center;
  margin: 1px;
}
    <div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

    这很可能不是您需要的，而是对 flex 行为的模拟

    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wrapper div {
  min-width: 100px;
  background: gray;
  text-align: center;
  margin: 1px;
}

.wrapper div:last-child {
  grid-column: 1 / 3;
}
    <div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

    • 2

相关问题