如何制作破碎/波浪状的网格

Posted 2023-03-05

【中文标题】如何制作破碎/波浪状的网格

【英文标题】：How to make a broken / wavy grid

【发布时间】：2021-06-07 04:13:15

【问题描述】：

我已经尝试过使用负下边距和正上边距的 flexbox，但是 flexbox 的子级比看起来更难设置样式。

有没有更好的方法来达到这个效果？ Flexbox 是不是该走的路？

我怎样才能通过良好的现代解决方案实现这一目标？ 您将如何明智地处理这种响应式响应？

.broken-grid 
  display: flex;
  justify-content: center;
  margin: 0 0 -30px -30px;


.broken-grid__item 
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding-left: 30px;


.visual 
  width: 25vw;
  height: 100%;
  margin-bottom: 30px;


.visual:nth-child(4n + 2) 
  margin-bottom: -50px;
  margin-top: 100px;


.visual:nth-child(4n + 3) 
  margin-top: -50px;
  margin-bottom: 100px;

<div class="broken-grid">
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" >
    </picture>
  </div>
</div>

【问题讨论】：

这能回答你的问题吗？ Create a Masonry grid with flexbox (or other CSS)

我不确定我是否正在寻找砖石网格，您是否建议使用空子填充网格项目上方和下方的空白空间？

【参考方案1】：

在这个例子中，我使用了一个普通的 css。

灵活显示被使用，就像子元素一样，由继承 - display: inherit。我对间隔使用了gap 规则 - gap: 15px。

为了定义带有图像的偶数/奇数块，我使用了具有 even 和 odd 属性的 :nth-child() 伪类。

body 
    height: 100vh;
    margin: 0;


.broken-grid 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;


.broken-grid__item 
    display: inherit;
    flex-direction: column;
    gap: inherit;
    flex: 25%;


.visual img 
    width: 100%;
    height: 100%;
    object-fit: cover;


.broken-grid__item:nth-child(odd) 
    margin-top: 50px;


.broken-grid__item:nth-child(even) 
    margin-bottom: 50px;

<div class="broken-grid">
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700"  />
        </picture>
    </div>
</div>