我花了无数个小时试图弄清楚如何正确地将此部分变成总共 5 张图像的网格布局第 1 张图像在左上角第 4 张图像在左下角第 2 张图像在中间顶部和底部以及第 3 张图像在右上角和右下角的第 5 张图片。我将附上我尝试过的内容及其外观的图片。我尝试过使用常规 CSS 以及使用 Tailwind 类来完成它，经过大量在线研究和观看视频后，我无法破解它。我接近了，但这不是我想要的样子。任何帮助将不胜感激。
/* .topNotchImg {
width: 50%;
height: 300px;
} */
.gridTopNotch {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 5px 5px;
padding: 30px;
grid-template-areas: "pic-1 pic-1 pic-2 pic-2 pic-3 pic-3" "pic-1 pic-1 pic-2 pic-2 pic-3 pic-3" "pic-4 pic-4 pic-2 pic-2 pic-5 pic-5" "pic-4 pic-4 pic-2 pic-2 pic-5 pic-5";
}
.pic-1 {
grid-area: pic-1;
}
.pic-2 {
grid-area: pic-2;
}
.pic-3 {
grid-area: pic-3;
}
.pic-4 {
grid-area: pic-4;
}
.pic-5 {
grid-area: pic-5;
}<section>
<div class="text-center">
<h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
<p>These places are on everyone's bucket list</p>
</div>
<div class="gridTopNotch">
<div class="topNotchImg pic-1">
<img src="img/destinations-machu.jpg" alt="Machu Picchu" />
<h4 class="text-xl"><strong>Machu Picchu</strong></h4>
<p>Peru</p>
</div>
<div class="topNotchImg pic-2">
<img src="img/destinations-rome.jpg" alt="Rome" />
<h4 class="text-xl"><strong>Rome</strong></h4>
<p>Italy</p>
</div>
<div class="topNotchImg pic-3">
<img src="img/destinations-sydney.jpg" alt="Sydney" />
<h4 class="text-xl"><strong>Sydney</strong></h4>
<p>Australia</p>
</div>
<div class="topNotchImg pic-4">
<img src="img/destinations-paris.jpg" alt="Paris" />
<h4 class="text-xl"><strong>Paris</strong></h4>
<p>France</p>
</div>
<div class="topNotchImg pic-5">
<img src="img/destinations-rio.jpg" alt="Rio de Janeiro" />
<h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
<p>Brazil</p>
</div>
</div>
</section>顺风：
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-2 grid-flow-row gap-4">
<img
src="img/destinations-machu.jpg"
alt="Image 1"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="img/destinations-rome.jpg"
alt="Image 2"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="img/destinations-sydney.jpg"
alt="Image 3"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="img/destinations-paris.jpg"
alt="Image 4"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="img/destinations-rio.jpg"
alt="Image 5"
class="rounded-md shadow-lg h-auto w-auto"
/>
</div>我想提前说声谢谢——我不知道还能做什么，我似乎想不通。
考虑将其简化为所需的网格区域。您将需要 3 列，中间元素跨越两行。
.gridTopNotch {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 5px 5px;
padding: 30px;
grid-template-areas:
"pic-1 pic-2 pic-3"
"pic-4 pic-2 pic-5";
}
.pic-1 {
grid-area: pic-1;
}
.pic-2 {
grid-area: pic-2;
}
.pic-3 {
grid-area: pic-3;
}
.pic-4 {
grid-area: pic-4;
}
.pic-5 {
grid-area: pic-5;
}<section>
<div class="text-center">
<h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
<p>These places are on everyone's bucket list</p>
</div>
<div class="gridTopNotch">
<div class="topNotchImg pic-1">
<img src="https://picsum.photos/200/100" alt="Machu Picchu" />
<h4 class="text-xl"><strong>Machu Picchu</strong></h4>
<p>Peru</p>
</div>
<div class="topNotchImg pic-2">
<img src="https://picsum.photos/200/320" alt="Rome" />
<h4 class="text-xl"><strong>Rome</strong></h4>
<p>Italy</p>
</div>
<div class="topNotchImg pic-3">
<img src="https://picsum.photos/200/100?" alt="Sydney" />
<h4 class="text-xl"><strong>Sydney</strong></h4>
<p>Australia</p>
</div>
<div class="topNotchImg pic-4">
<img src="https://picsum.photos/200/100?0" alt="Paris" />
<h4 class="text-xl"><strong>Paris</strong></h4>
<p>France</p>
</div>
<div class="topNotchImg pic-5">
<img src="https://picsum.photos/200/100?1" alt="Rio de Janeiro" />
<h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
<p>Brazil</p>
</div>
</div>
</section><script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 grid-row-2 gap-4">
<img
src="https://picsum.photos/200/100"
alt="Image 1"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="https://picsum.photos/200/220"
alt="Image 2"
class="rounded-md shadow-lg h-auto w-auto row-span-2"
/>
<img
src="https://picsum.photos/200/100?"
alt="Image 3"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="https://picsum.photos/200/100?0"
alt="Image 4"
class="rounded-md shadow-lg h-auto w-auto"
/>
<img
src="https://picsum.photos/200/100?1"
alt="Image 5"
class="rounded-md shadow-lg h-auto w-auto"
/>
</div>一种做法如下，代码中有说明注释：
/* a simple reset, to set margin and padding to
0, to remove browser defaults, set the box-
sizing algorithm to "border-box", in order to
include padding and border-widths in the
declared sizes:*/
*,::before,::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* setting the size of the element on the block-
axis (the axis on which blocks are laid out,
vertical in English and equivalent to
"height"); setting to 100vh ensures that the
body fills the viewport: */
block-size: 100vh;
font-family: system-ui;
font-size: 16px;
font-weight: 400;
padding-block: 1rem;
padding-inline: 1.5rem;
}
section {
/* setting display grid, with a gap between
adjacent grid-items of 1rem: */
display: grid;
gap: 1rem;
}
h1 {
font-size: 4rem;
font-weight: 700;
}
h4 {
font-size: 2.5rem;
}
h4::after {
/* this is personal taste, but is intended to
add a comma after, for example, "Macchu
Pichu" and before "Peru" (remove if
unwanted): */
content: ',';
}
.text-center {
text-align: center;
}
.gridTopNotch {
/* again, using CSS grid, with the same gap as
before between adjacent grid-item elements: */
display: grid;
gap: 1rem;
/* here we name three grid areas in each of two
grid-rows, with the central grid-area - "cell
2" - spanning both rows: */
grid-template-areas:
"cell-1 cell-2 cell-3"
"cell-4 cell-2 cell-5";
/* defining the size of each column, the first and
third being 1fr, and the second (central) being
2fr: */
grid-template-columns: 1fr 2fr 1fr;
}
.pic-2 {
/* positioning the .pic-2 element in the "cell-2"
grid-area, specifying this purely because that
grid-area spans two rows, which won't be
applied when the cells are placed automatically: */
grid-area: cell-2;
}
.topNotchImg {
border: 1px solid currentColor;
border-radius: 1rem;
display: flex;
flex-direction: column;
padding: 0.5rem;
}
img {
border-radius: 0.75rem;
/* setting the maximum inline-size (the inline size is
the size of the element on the inline axis, which
is the axis on which inline content is laid out;
the horizontal axis and therefore equivalent to
"width" or "max-inline-width" in the English
language: */
max-inline-size: 100%;
/* directing the element to fit the available space,
and maintaining its aspect ratio: */
object-fit: cover;
}<section>
<div class="text-center">
<h1 class="text-5xl pb-2"><strong>Top Notch Destinations</strong></h1>
<p>These places are on everyone's bucket list</p>
</div>
<div class="gridTopNotch">
<div class="topNotchImg pic-1">
<img src="https://picsum.photos/300/200" alt="Machu Picchu" />
<h4 class="text-xl"><strong>Machu Picchu</strong></h4>
<p>Peru</p>
</div>
<div class="topNotchImg pic-2">
<img src="https://picsum.photos/300/200" alt="Rome" />
<h4 class="text-xl"><strong>Rome</strong></h4>
<p>Italy</p>
</div>
<div class="topNotchImg pic-3">
<img src="https://picsum.photos/300/200" alt="Sydney" />
<h4 class="text-xl"><strong>Sydney</strong></h4>
<p>Australia</p>
</div>
<div class="topNotchImg pic-4">
<img src="https://picsum.photos/300/200" alt="Paris" />
<h4 class="text-xl"><strong>Paris</strong></h4>
<p>France</p>
</div>
<div class="topNotchImg pic-5">
<img src="https://picsum.photos/300/200" alt="Rio de Janeiro" />
<h4 class="text-xl"><strong>Rio de Janeiro</strong></h4>
<p>Brazil</p>
</div>
</div>
</section>参考资料：