如何在带有网格的 CSS 中创建这种类型的布局

Question

我想使用带有响应式媒体查询的 css 网格进行布局，但我不知道如何制作这个

这里是移动视图 enter image description here

这里是桌面视图 enter image description here

对于桌面视图，我可以使用grid-template-columns: repeat(5, 1fr);

我怎样才能让它看起来像在移动视图中？

我的 HTML 标记

  <li className="invoice-list">
      <h1>#{x.id}</h1>
      <p>{x.paymentDue}</p>
      <h1>{x.clientName}</h1>
      <h1>${x.total}</h1>
      <button>{x.status}</button>
  </li>

Answer 1

在这种情况下使用 flexbox 可能更有意义。桌面版使用flex-flow: row;，移动版使用flex-flow: column wrap;。

body {
  background: rgb(25, 25, 40);
  padding: 3em;
}

.invoice-list {
  background: rgb(40, 40, 70);
  padding: 1em;
  border-radius: 0.5em;
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-flow: column wrap;
  height: 7em;
}
.pending {
  text-align: left;
  color: orange;
  background: rgba(255, 150, 0, 0.1);
  border: none;
  border-radius: 0.5em;
}
.pending::before {
  content: "•";
  margin-right: 1em;
}
.invoice-list > * {
  display: block;
  padding: 0.5em;
}

@media (min-width: 1000px) {
  .invoice-list {
    /* grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr; */
    flex-flow: row;
    height: 3em;
  }
  .invoice-list > * {
    align-self: right;
    flex-basis: 100%;
  }
}

<div class="invoice-list">
  <b>#PC4066</b>
  <span>Due 28 Jul 2021</span>
  <b>$130.00</b>
  <b>John</b>
  <button class="pending">Pending</button>
</div>

Answer 2

我会混合使用css-grid 和flexbox

您使用css-grid 创建两行两列。 然后使用flexbox 可以justify-content:flex-start; 获取第一列中的内容，justify-content:flex-end; 获取第二列中的项目。

如果您还不熟悉flexbox，有很多在线小游戏可以学习！

这是一个简单的例子：

.invoice-list {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
}

.id {
  grid-area: "tl";
  display: flex;
  justify-content: flex-start;
}

.paymentDue {
  grid-area: "tr";
  display: flex;
  justify-content: flex-end;
}
  
  .bottom-left{
    grid-area: "bl";
  display: flex;
  flex-direction:column;
  }
  
  
  .button{
   grid-area: "br";
   display: flex;
   justify-content: flex-end;
   align-items:flex-end;
  }

<li class="invoice-list">
      <h1 class="id">#{x.id}</h1>
      <p class="paymentDue">{x.paymentDue}</p>
      <div class="bottom-left">
        <h1>{x.clientName}</h1>
        <h1>${x.total}</h1>
      </div>
      <div class="button">
        <button>
          {x.status}
        </button>
      </div>
  </li>