网格 - HTML | CSS [关闭]答案

【问题标题】：Grid - HTML | CSS [closed]网格 - HTML | CSS [关闭]
【发布时间】：2019-08-22 17:55:34
【问题描述】：

<div class="container">
 <div class="item half-width">1</div>
 <div class="item half-width">2</div>
 <div class="item half-width">4</div>
 <div class="item half-width">5</div>
 <div class="item half-width">6</div>
 <div class="item full-width">7</div>
</div>

如何为 html 内容编写 css 以便我可以得到上述输出，如图所示，可在 x 方向滚动。 DOM 完全渲染后，可能在某个时间点，我需要删除元素 4 ，以便 5 出现在前面并自动对齐。

【问题讨论】：

标签： html css sass grid

【解决方案1】：

在仔细阅读您的问题后，我使用 css grid 提出了解决方案。我不是 CSS 网格方面的专家，但我希望这能解决您的问题

 .item:nth-child(4n),
.item:nth-child(4n-1) {
  order: 1;
  grid-row-start: 2
} 



.container {
  display: grid;
  max-width:100vw;
  overflow-x:scroll;
  grid-template-columns: 50% 50% 50% 50%;
  grid-template-rows: 150px 150px;
}

.item {
  height: 140px;
  margin: 5px;
  background:blue;
  color:white;
 
}
.item:last-child {
  grid-column-end:5;
  grid-column-start:3;
}

<div class="container">
  <div class="item half-width">1</div>
  <div class="item half-width">2</div>
  <div class="item half-width">3</div>
  <div class="item half-width">4</div>
  <div class="item half-width">5</div>
  <div class="item half-width">6</div>
  <div class="item full-width">7</div>
</div>

【讨论】：

感谢您的回复。但是如果必须添加元素 8，则 7 和 8 必须是半角。现在 9 出现时，9 必须占据全宽
@SriVivek 如果这对你有用，请不要忘记评价和/或接受这个答案。谢谢！ :D
你能帮帮我吗
好吧。我的回答能解决你的问题吗？
没有米海。它没有

【解决方案2】：

此外，当您尝试使用多维结构时，您可以考虑使用 CSS 网格。

.container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 50px 90px;
    grid-gap: 5px;
}

.container .item {
    background: red;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.container .two-column-right {
    grid-column: 3 / -1;
}

.container .two-column-left {
    grid-column: 1 / 3;
}

<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item two-column-left'>5</div>
  <div class='item two-column-right'>6</div>
</div>

<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
  <div class='item'>6</div>
  <div class='item two-column-right'>7</div>
</div>

【讨论】：

为什么不赞成..？