css - 不同的订单元素和布局与CSS3通过决议与相同的HTML

Question

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

我需要:

1. 如果屏幕宽度在 1024px 之前或之后，则有两个不同的 block 顺序，
2. => 1024px，我必须显示按两列组织的元素，并确保 block 1、2、3 位于左列内， block 4、5 位于右列内(包装器的高度必须适合内容)，
3. < 1024px，所有 block 都位于唯一列内，但顺序不同。

像这样...

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;
    }

}

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

有人有想法吗？

Answer 1

您可以从网格布局切换到列 CSS 布局(直到砌体 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 - > 1023px column-count 和 display:block 用于 2 列布局。 break-after:always 和 break-before: column 将适用于使用 Chrome 引擎的浏览器(请参阅 CSS Fragmentation )。

• 3 - 对于 firefox 和 >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 列，无论子级的高度如何，您都会注意到在第二个示例中，第 2 列更高， Chrome 似乎遵循了破坏规则，第一列不需要是最高的。

.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 或众所周知的可靠的砌体库来避免 FF CSS 技巧。技巧随时可能过时;)

• 不知道 Safari 对 CSS 碎片的行为。

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/