使用1个标记基于断点创建2个布局

Question

该代码片段显示了两个示例。首先是小断点的布局，它在一列中有4个元素。第二个是大断点的布局，其中一列中有2个元素，另一列中有2个元素。从第二列移过来的元素是从中间移来的(“第二段”，而不是第一段或第三段)。

我可以像代码片段一样为不同的断点添加2个不同的标记，但复制标记并不好。我如何使用1个标记并使其适应不同断点处的两种布局？我尝试使用网格布局，但它不起作用，因为大断点中的左上角图像在底部有额外的空间，因为右上角的段落(它们占据相同的高度，因为它们在相同的网格行中)。

​

h2 {
  margin: 0;
}

.container1 {
  width: 100%
}

.container1 .column1 img {
  width: 100%
}

.container2 {
  display: flex;
  flex-direction: col;
  flex-wrap: wrap;
}

.container2 .column1 {
  width: 50%;
}

.container2 .column1 img {
  width: 100%
}

.container2 .column2 {
  width: 50%;
}

<h1>first example</h1>
<div class="container1">
  <div class="column1">
    <img src="https://picsum.photos/250/100">
  </div>
  <div class="column2">
    <h2>first paragraph</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
      id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
      justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
      euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
    </div>
  </div>
  <div>
    <h2>second paragraph</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
      id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
      justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
      euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
    </div>
  </div>
  <div>
    <h2>third paragraph</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
      id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
      justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
      euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
    </div>
  </div>
</div>
<h1>second example</h1>
<div class="container2">
  <div class="column1">
    <img src="https://picsum.photos/250/100">
    <div>
      <h2>second paragraph</h2>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
        id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
        Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
        interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
      </div>
    </div>
  </div>
  <div class="column2">
    <div>
      <h2>first paragraph</h2>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
        id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
        Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
        interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
      </div>
    </div>
    <div>
      <h2>third paragraph</h2>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
        id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
        Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
        interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
      </div>
    </div>
  </div>

​

Answer 1

对于桌面版本，您可以使用grid-row扩展行并保留清晰的标记

​

body {
  margin: 0;
}

.img__content {
  grid-row: 1 / 4;
  position: relative;
  height: 100%;
}

.img__content img {
  position: absolute;
  max-width: 100%;
  height: 100%;
  width: unset;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

.bloc:nth-child(4) {
  grid-row: 3 / span 2;
}

.bloc {
  grid-row: span 2;
}

<div class="grid">
  <div class="img__content">
    <img src="https://images.unsplash.com/photo-1619445189993-b96d083fc862?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTI0MDIyMw&ixlib=rb-1.2.1&q=85" alt="">
  </div>
  <div class="bloc">
    <h1>Paragraph 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
  </div>
  <div class="bloc">
    <h1>Paragraph 2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
  </div>
  <div class="bloc">
    <h1>Paragraph 3</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
  </div>
  <div class="bloc">
    <h1>Paragraph 4</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
  </div>
</div>

​