css - 不同的订单项和布局与 css3 的分辨率相同的 html

Question

我无法获得保持相同 HTML 布局的响应结果。
我需要 :

如果屏幕宽度在 1024px 之前或之后，则两种不同的块顺序，

=> 1024px，我必须显示按两列组织的元素，并确保块 1、2、3 位于左列内，而块 4、5 位于右列内(包装器的高度必须适合内容) ,

< 1024px，所有块都在唯一列内，但顺序不同。

像这样...
1024px 及更多

1023px 及以下

当前 CSS

@media screen and (max-width: 1023px) {
    .production-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 0 var(--standard-margin) 0 var(--standard-margin);
        justify-content: stretch;
        min-height: 200px;
    }

    aside.production-block{
        max-width: 100vw;
        width: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        margin: 24px 0;
        display: grid;
        grid-template-rows: 1fr auto;
        break-inside: avoid;
    }

    .production-container > .production-block-4 {
        order: 1;
    }

    .production-container > .production-block-1 {
        order: 2;
    }

    .production-container > .production-block-2 {
        order: 3;
    }

    .production-container > .production-block-5 {
        order: 4;
    }

    .production-container > .production-block-3 {
        order: 5;
    }

}

@media screen and (min-width: 1024px) {

   .production-container{
        column-count: 2;
        column-gap: 50px;
        max-width: 1024px;
        background: linear-gradient( var(--text-light-color), var(--text-light-color) ) no-repeat center/1px 100%; /* vertical line in the center */
   }
   .production-block {
        margin: 0 0 10px 0;
        break-inside: avoid;
        max-width: 520px;
    }

}

最重要的问题是，在最大的分辨率下，我无法强制每个块位于第一列或第二列上，它们根据高度内容自然放置。也许，我应该改变与最小分辨率兼容的 css 策略，但是当我使用“网格”时，每一行的高度都会产生很大的空白。
有人有想法吗？

Answer 1

您可以从网格布局切换到列 CSS 布局(直到 masonry CSS 网格布局广泛可用 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout ，这里是一个示例 https://codepen.io/gc-nomade/pen/ExXNXdd 对于此时如果激活 FF)
在下面的代码段中演示您的 HTML 代码 没有空格
它是如何工作的 ？

1 - < 1024px grid单列使用顺序(如果没有设置模板，网格会创建一个单列)

2 - > 1023 像素 column-count和 display:block对于 2 列布局。 break-after:always & break-before: column将适用于使用 chrome 引擎的浏览器(参见 CSS Fragmentation)。

3 - 对于火狐 & >1023px 一个拥抱 margin-bottom在第三个元素上，所以可以有 第一列只有 3 个 .此边距不会应用于容器内部，npr 将溢出它，它只会将第四个推到下一列。
Firefox 可以通过过滤(直到它理解 break-after:always 和 Column CSS)来应用仅适用于 Firefox 浏览器使用的边距技巧:

@-moz-document url-prefix() {
  .grid > div:nth-child(3) {
   margin-bottom:100%;
   }
}

现场示例其中 主容器仅占用所需的高度 包裹 2 列，不管 child 的高度，你会注意到在第二个例子中，col 2 更高，Chrome(s) 似乎遵循打破规则，第一列不需要是最高的.

.grid {
  display: grid;
  gap: 1em;
  border:solid;
  background:gray;
    
}

.grid > div:nth-child(1) {
  order: 1;
}
.grid > div:nth-child(2) {
  order: 2;
}
.grid > div:nth-child(3) {
  order: 4;
}
.grid > div:nth-child(4) {
  order: 0;
}
.grid > div:nth-child(5) {
  order: 3;

}

@media (min-width: 1024px) {
  .grid {
    display: block;
    column-count: 2;
  }
  .grid > div {
    margin-bottom: 1em;
  }
  .grid > div:nth-child(3) {
    break-after:always;
  }
  .grid> div:nth-child(4) {
      break-before: column;
      }
  @-moz-document url-prefix() {
    .grid > div:nth-child(3) {
    margin-bottom:100%;/* trick for FF that won't show that margin if the last inside a column but not in the last column */
  }
}
}

/* demo */
.grid {
  counter-reset: divs;
}
.grid > div {
  display: grid;
}
.grid > div::before {
  counter-increment: divs;
  content: counter(divs);
  color: white;
  margin: auto;
  font-size: clamp(10px, 5vmin, 30px);
}
.grid > div:nth-child(1) {
  background: #fa9917;
  height: 100px;
}
.grid > div:nth-child(2) {
  background: #33e0fe;
  height: 160px;
}
.grid > div:nth-child(3) {
  background: #ff3366;
  height: 80px;
}
.grid > div:nth-child(4) {
  background: #2bc940;
  height: 80px;
}
.grid > div:nth-child(5) {
  background: #3399fe;
  height: 160px;
}

<div class=grid>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Hello the world
<hr>
Make second column taller to see where the fourth stands before you test or ask ;)
<div class=grid>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div style="height:600px"></div>
</div>

最后，我建议使用一点点 javascript，或者众所周知的可靠的 masonry 库来避免 FF CSS 技巧。技巧随时可能过时；)

不知道关于 CSS 碎片的 Safari 行为。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation

CSS Fragmentation is a module of CSS that defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.

Fragmentation occurs when an inline box wraps onto multiple lines. It also occurs when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.

关于原生 CSS 网格砌体，您可以查看和阅读: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/