Question

<thing>
    <h2 class='heading'>
        HEADING
    </h2>

    <video-thing>
        <img src="https://placehold.it/1600x1100">
    </video-thing>

    <description>
        <p>TEXT</p>

        <button class='unfold'>Read more</button>
    </description>
</thing>

这是标记中事物的自然顺序。

在某个断点，我要这样做：

但是-我仍在从flex-box的世界中思考。我希望第一个“列”对齐flex-start ish 。

请注意，较长的文本如何填充第一项中的空间，而第二个示例中的短文本则保持为“一半”。

CodePen

我猜想这种对齐方式是“块轴”，例如：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

@media (min-width: 800px) {
    thing {
        display: grid;
        grid-template-columns: [message] 1fr [visual] 1fr;
        /* HERE */
    }
    .heading, description {
        grid-column: message;
    }
    video-thing {
        grid-column: visual;
        grid-row: 1/3;
    }
}

我也曾在网格区域工作过，但是却走到了同一个终点。

我知道这与flex-box /完全不同，但是我很确定我的建议是可能的-而且我还不知道如何说“网格” 。 ; ）

更新 @Temani Afif的建议启发了我-因此，这里有更多图片可以帮助说明。

如果没有在父级上显式设置grid-template-rows-它会基于您为子级设置的任何网格行设置进行推断...因此，在这种情况下-将创建第三行，增长”，因为默认情况下它们是“自动” /，但只有两者-不能。如果将1/4或span 100用作记录，它也将起作用。或者明确设置更多行并设置面积-或其他几种方式。

Answer 1

您可能正在寻找以下配置：

thing {
    display: grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:auto auto auto; /*not mandatory, you can remove it */
}
video-thing {
    grid-column: 2;
    grid-row: span 3;
}

* {
  box-sizing: border-box;
}


/* + reset */

img {
  display: block;
  width: 100%;
  height: auto;
}

thing,
video-thing,
description {
  display: block;
}

body {
  /* some context */
  width: 98%;
  max-width: 900px;
  margin: 100px auto;
}

thing {
  position: relative;
  padding: 10px;
}

@media (max-width: 799px) {
  video-thing {
    margin: 20px 0;
  }
}

@media (min-width: 800px) {
  thing {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .heading,
  description {
    padding-right: 20px;
  }
  description {
    margin-top: 20px;
  }
  video-thing {
    grid-column: 2;
    grid-row: span 3;
  }
}

thing {
  border: 4px solid green;
}

.heading {
  border: 4px solid orange;
}

description {
  border: 4px solid blue;
}

video-thing {
  border: 4px solid red;
}

.heading {
  font-family: 'Helvetica';
  font-size: 24px;
  font-weight: 700;
}

p {
  font-family: 'Georgia';
  font-size: 16px;
  line-height: 1.4;
}

p+p {
  margin-top: 10px;
}

button {
  margin-top: 20px;
}

thing+thing {
  margin-top: 60px;
}

<thing>
  <h2 class='heading'>Video section / what you should know number 1</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>













<thing>
  <h2 class='heading'>Video section / what you should know number 2</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p>short text</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 3</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 4</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>



<thing>
  <h2 class='heading'>Video section / what you should know number 5</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>


<thing>
  <h2 class='heading'>Video section / what you should know number 6</h2>

  <video-thing>
    <img src="https://placehold.it/1600x1100">
  </video-thing>

  <description>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>
    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <p><strong>Full text description stuff here</strong>: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque placeat eaque fugiat voluptatibus voluptatum excepturi ut sunt odit voluptates sint cum quasi illo quae laboriosam, reiciendis
      consequatur veniam iusto.</p>

    <button class='unfold'>Read more</button>
  </description>
</thing>

对齐网格列项目（例如对齐：弹性启动）

1 个答案: