css - 在尊重图像宽高比和填充的同时设置复杂的网格布局

Question

我需要构建一个非常复杂的网格布局:

基本上，要获得正确的网格并不难，但困难的是要遵守以下规则:

• 保持图片纵横比(正方形)
• 在所有网格项之间保持相等的边距(以绿色显示)
• 如所附图片所示显示左边框

这带来了另一个困难:

• 博客文章摘录必须(!)有不同的长度

我已经有了使用 Flexbox 的解决方案。因此，我设置了三个栏目，客户可以选择在什么位置和栏目中显示哪篇博文。 他们没有提示过，我还是觉得这样应该更方便。

除此之外，对于较小的屏幕和设备来说，它变得相当复杂，因为我不得不放弃布局并使用 JavaScript 创建一个新数组来实现(几乎)与桌面屏幕上相同的文章顺序。

我只是尝试使用 CSS Grid 进行设置，但再次遇到所有未定义的内容(文本长度)，我找不到解决方案来尊重纵横比或网格项边距。

还有其他方法可以解决这个问题吗？

Answer 1

这是我得到的。但是让网格自适应是相当困难的

https://codepen.io/hisbvdis/pen/qBWoWmx

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px;
  max-width: 1340px;
  margin: 0 auto;
}

.item {
  position: relative;
  grid-row: span 7;
  padding: 10px;
  padding-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.item--big {
  grid-column: span 2;
  grid-row: span 12;
}

.img-wrapper {
  position: relative;
  height: 0;
  margin-bottom: 10px;
  padding-bottom: 100%;
}

.item__img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item__title {
  margin-bottom: 5px;
}

.item__desc {
  margin-bottom: 10px;
  font-size: 0.8rem;
}

.item__link {
  color: #000;
}

<div class="grid">
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item item--big">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item item--big">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item item--big">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item item--big">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
  <div class="item">
    <figure class="img-wrapper">
      <img class="item__img" src="https://picsum.photos/536/354" width="536" height="354" alt="Item image">
    </figure>
    <h3 class="item__title">Item title</h3>
    <p class="item__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, consectetur obcaecati</p>
    <a class="item__link" href="">Read more</a>
  </div>
</div>