使图像双倍高度的兄弟（难以主题）

Question

当屏幕缩放时，我正在努力使右侧的大图像与其他项目在视觉上对齐。

如果可以使用Flexbox或网格，我只是不确定如何使用这些工具实现这一点。

谢谢

<section class="content-wrap sleep-smart">

 <div class="col-1-of-3 fold">
 <a href="#">
 <img class="sleep-smart__img sleep-smart__img--beds" src="http://qwerty-demos.co.uk/img/folding-beds.jpg" alt="xxx">
 <div class="sleep-smart__title-box">
 <h3 class="sleep-smart__h3">Folding Beds</h3>
 <span class="sleep-smart__faux-link">Discover<br>More</span>
 </div>
 </a>
</div>

https://codepen.io/qwerty-design/pen/PQVzaL?editors=1100

Answer 1

它可以通过多种方式实现，其中之一就是使用CSS网格。你可以找到一个很好的指南here和here

要使HTML元素表现为网格容器，您必须将display属性设置为grid或inline-grid。网格容器由网格项组成，放置在列和行中。

.grid-container {
  /*Must set display to grid or inline-grid*/
  display: grid;
  
  /*Define number of columns and column width*/
  /*Here we define 3 columns each of which is 33% of its parent width*/
  /*You can set each column with different width e.g.(100px, 200px, 50px)*/
  grid-template-columns: repeat(3, 33%);
  
   /*Define number of rows and row height*/
  /*Here we define 2 rows each of which is 100px*/
  grid-template-rows: repeat(2, 100px);
  
  /*Spaces between columns*/
  grid-column-gap: 10px;
  
  /*Spaces between rows*/
  grid-row-gap: 10px
}
/*Just for demo*/
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
  background-color: #333;
  color: #fff
}
/*For each item, select its position you can think of it as a table and point to each cell with (row,col)*/
.item-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}

.item-3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item-4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
</div>