如何創建 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>