html - 如何创建 3 列嵌套 CSS 网格布局？

Question

我正在尝试实现这样的 3 列布局:

    ---------------------------------------------
    |Header (100%)                              |
    |-------------------------------------------|
    |Images (50%)        |Description (50%)     |
    |--------------------|----------------------|
    |Image 1  |  Image 2 |   Description        |
    |         |----------|                      |
    |         |  Image 3 |                      |
    |         |          |                      |
    |         |          |                      |
    |         |          |                      |
    ---------------------------------------------

我的问题是图片 1 很长(单页网站的图片)。图片 2 和图片 3 被推得很远，因为图片 3 的行仅在冗长的图片 1 结束后才开始。我希望图像 2 和图像 3(非常低的高度)相互堆叠。

.design-portfolio {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}
.sintra {
    grid-row: 1;
}
.joia {
    grid-row: 2;
}
.guitar {
    grid-row: 3;
}
.sintra, .joia, .guitar {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}
.sintra h3, .joia h3, .guitar h3 {
    grid-column: 1 / 3;
    grid-row: 1;
}
.images {
        grid-column: 1;
        max-height: auto;
        grid-row: 2/3;
        display: grid;
        justify-items: center; 
        grid-template-columns: minmax(20%, 1fr) 1fr;
        grid-gap: 5px;
}
.image1 {
    grid-column: 1;
    grid-row:1/2;
    max-height: auto;
    max-width: 90%; 
    object-fit: contain;
}
.image2 {
    grid-column: 2;
    max-width: 90%; 
    object-fit: contain;
}
.image3 {
    grid-column: 2;
    max-width: 90%; 
    object-fit: contain;
}
.description, .description,  .description {
    grid-column: 2;
    grid-row: 2/3;
    width: 75%;
    padding-left: 20px;
}

<div class="design-portfolio">
    <article class="sintra">
       <h3>We spot Sintra - Boulder Festival Event</h3>

       <div class="images">
             <img class="image1" src="images/sintra.svg" alt="Sintra Subsite">
             <img class="image2" src="images/sintra2.svg" alt="Sintra Subsite">
             <img class="image3" src="images/sintra3.svg" alt="Sintra Website">
       </div>

       <div class="description">
              <h4>Challenge</h4>
              <p>The Challenge was to create a website (desktop/mobile) for an event.</p>
              <h4>Activities</h4>
              p>UX Research, User Flow, Site Maps, Wireframing (Adobe XD), Prototyping (Adobe XD)</p>
        </div>
     </article>
    <article class="joia">
    </article>
    <article class="guitar">
    </article>
</div>

Answer 1

我认为解决问题的最简单方法是将网格视为 3x4 表格。

你会想知道为什么？

嗯，有一个三行四列的表格呈现以下结构:

+===============+=======+=======+=======+
| Row 1 / Col 1 | Col 2 | Col 3 | Col 4 |
+===============+=======+=======+=======+
| Row 2         |       |       |       |
+---------------+-------+-------+-------+
| Row 3         |       |       |       |
+---------------+-------+-------+-------+

生成以下 css-grid 代码:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto repeat(4, 1fr);
  grid-gap: 20px;
}

这样看来，解决方案很简单，你只需要组合你需要的列/行，在这种情况下:

+========+========+========+========+
|               Header              |
+========+========+========+========+
|        |        |        |        |
+--------+--------+--------+--------+
|        |        |        |        |
+--------+--------+--------+--------+

可以通过如下css-grid代码实现:

.header-container {
  grid-area: 1 / 1 / 2 / 5;
}

下一步:

+=========+=========+=========+=========+
|                 Header                |
+=========+=========+=========+=========+
|         |         |         |         |
+ Image 1 +---------+---------+---------+
|         |         |         |         |
+---------+---------+---------+---------+

可以通过如下css-grid代码实现:

.image1-container {
  grid-area: 2 / 1 / 4 / 2;
}

下一步:

+=========+=========+=========+=========+
|                 Header                |
+=========+=========+=========+=========+
|         | Image 2 |         |         |
+ Image 1 +---------+---------+---------+
|         | Image 3 |         |         |
+---------+---------+---------+---------+

可以通过如下css-grid代码实现:

.image2-container {
  grid-area: 2 / 2 / 3 / 3;
}

.image3-container {
  grid-area: 3 / 2 / 4 / 3;
}

最后，我们得到:

+=========+=========+=========+=========+
|                 Header                |
+=========+=========+=========+=========+
|         | Image 2 |                   |
+ Image 1 +---------+    Description    +
|         | Image 3 |                   |
+---------+---------+---------+---------+

可以通过如下css-grid代码实现:

.description-container {
  grid-area: 2 / 3 / 4 / 5;
}

获取，例如:

.container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  grid-template-rows: auto repeat(4, 1fr);
  grid-gap: 20px;
  justify-items: center;
  align-items: center;
}

.container img {
  object-fit: cover;
  max-width: 100%;
}

.header-container {
  grid-area: 1 / 1 / 2 / 5;
}

.image1-container {
  grid-area: 2 / 1 / 4 / 2;
}

.image2-container {
  grid-area: 2 / 2 / 3 / 3;
}

.image3-container {
  grid-area: 3 / 2 / 4 / 3;
}

.description-container {
  align-self: start;
  grid-area: 2 / 3 / 4 / 5;
}

<div class="container">
  <div class="header-container">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
  </div>
  <div class="image1-container">
    <img src="https://picsum.photos/350/500" alt="Lorem picsum">
  </div>
  <div class="image2-container">
  <img src="https://picsum.photos/200/300" alt="Lorem picsum">
  </div>
  <div class="image3-container">
  <img src="https://picsum.photos/200/250" alt="Lorem picsum">
  </div>
  <div class="description-container">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
    <p>Pellentesque interdum, nisl vitae facilisis ultrices, ipsum augue malesuada purus, id fermentum sem mauris vel justo. Nulla facilisi. Nam et vehicula enim. In vulputate finibus lorem, quis tincidunt odio eleifend vitae. Praesent fringilla molestie molestie. Curabitur eget placerat eros, vel sodales odio. Nam rutrum mauris ipsum, a pretium urna laoreet consequat. Suspendisse tincidunt quam sit amet odio efficitur, nec imperdiet ligula dictum. Proin at semper augue. Proin blandit ac quam at pharetra. Sed dignissim erat est, in blandit felis egestas non. Ut orci dolor, sodales et massa in, commodo imperdiet lacus. Nam non tortor risus. Proin enim leo, tempor id facilisis id, aliquet sit amet tortor. Duis eleifend nibh quis magna cursus ornare.</p>
    <p>Pellentesque interdum, nisl vitae facilisis ultrices, ipsum augue malesuada purus, id fermentum sem mauris vel justo. Nulla facilisi. Nam et vehicula enim. In vulputate finibus lorem, quis tincidunt odio eleifend vitae. Praesent fringilla molestie molestie. Curabitur eget placerat eros, vel sodales odio. Nam rutrum mauris ipsum, a pretium urna laoreet consequat. Suspendisse tincidunt quam sit amet odio efficitur, nec imperdiet ligula dictum. Proin at semper augue. Proin blandit ac quam at pharetra. Sed dignissim erat est, in blandit felis egestas non. Ut orci dolor, sodales et massa in, commodo imperdiet lacus. Nam non tortor risus. Proin enim leo, tempor id facilisis id, aliquet sit amet tortor. Duis eleifend nibh quis magna cursus ornare.</p>
    <p>Pellentesque interdum, nisl vitae facilisis ultrices, ipsum augue malesuada purus, id fermentum sem mauris vel justo. Nulla facilisi. Nam et vehicula enim. In vulputate finibus lorem, quis tincidunt odio eleifend vitae. Praesent fringilla molestie molestie. Curabitur eget placerat eros, vel sodales odio. Nam rutrum mauris ipsum, a pretium urna laoreet consequat. Suspendisse tincidunt quam sit amet odio efficitur, nec imperdiet ligula dictum. Proin at semper augue. Proin blandit ac quam at pharetra. Sed dignissim erat est, in blandit felis egestas non. Ut orci dolor, sodales et massa in, commodo imperdiet lacus. Nam non tortor risus. Proin enim leo, tempor id facilisis id, aliquet sit amet tortor. Duis eleifend nibh quis magna cursus ornare.</p>
    <p>Pellentesque interdum, nisl vitae facilisis ultrices, ipsum augue malesuada purus, id fermentum sem mauris vel justo. Nulla facilisi. Nam et vehicula enim. In vulputate finibus lorem, quis tincidunt odio eleifend vitae. Praesent fringilla molestie molestie. Curabitur eget placerat eros, vel sodales odio. Nam rutrum mauris ipsum, a pretium urna laoreet consequat. Suspendisse tincidunt quam sit amet odio efficitur, nec imperdiet ligula dictum. Proin at semper augue. Proin blandit ac quam at pharetra. Sed dignissim erat est, in blandit felis egestas non. Ut orci dolor, sodales et massa in, commodo imperdiet lacus. Nam non tortor risus. Proin enim leo, tempor id facilisis id, aliquet sit amet tortor. Duis eleifend nibh quis magna cursus ornare.</p>
  </div>
</div>