如何创建包含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网格代码：

.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>

​