我有以下代码
https://jsfiddle.net/pensee/pyb1oawt/24/
我试着把图片和一些样式放在页面上，但无法使其看起来像
https://store.linefriends.com/
此页面上有5个图像，标题为新收藏
我创建的小html也有5个图片，但它们垂直显示，不像
那样堆叠在页面上。我真的不知道该怎么做。
在这里发布Jsfidle中的HTML和CSS以供参考：
* {
font-family: sans-serif;
}
a {
color: black;
text-decoration: none;
}
.promo_banner {
background-color: #333;
text-align: center;
color: #fff;
font-size: 12px;
position: relative;
width: 100%;
z-index: 5000;
top: 0;
overflow: hidden;
}
div.logo {
display: flex;
justify-content: center;
}
div.mySlides img{
width: 40% !important;
margin-left: 30%;
}
div.logo img {
max-width: 205px;
width: 50%;
margin: 0 auto;
display: block;
max-width: 100%;
height: auto;
}
.nav .menu {
display: flex;
gap: 1rem;
list-style: none;
}
.nav {
display: flex;
justify-content: center;
}
.nav_wrapper {
background: #f1f1f1;
}
.nav .menu li {
cursor: pointer;
padding: 12px 0;
transition: 0.3s;
}
.nav .menu li.active {
color: green;
}
.nav .menu li:hover {
color: green;
border-bottom: 1px solid green;
}
.contents_title {
display: flex;
justify-content: space-between;
align-items: center;
height: 10px;
}
.line {
flex-grow: 1;
margin-left: 20px;
height: 2px;
background-color: #333;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
.shg-row {
display: flex;
flex-wrap: wrap;
min-height: inherit;
max-height: inherit;
justify-content: space-between;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Kittens</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="shg-row" data-col-grid-mode-on="">
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div class="shg-box-vertical-align-wrapper">
<div
class="shg-box shg-c"
id="s-cd25fc77-28ea-45a7-b683-2cffe168ca45"
>
<div class="shg-box-overlay"></div>
<div class="shg-box-content">
<div
class="
shg-c
shogun-image-container shogun-image-linked
shg-align-center
"
style=""
id="s-c5c157da-acba-4d5d-a09f-31edb371a702"
>
<img
alt="home-1"
src="https://i.ibb.co/Bnhb5MG/home-1.jpg"
class="shogun-image"
/>
</div>
</div>
</div>
</div>
</div>
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div class="shg-c" id="s-fc143b42-5d16-4f78-8b30-e0076397a038">
<div class="shg-row" data-col-grid-mode-on="">
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div
class="
shg-c
shogun-image-container shogun-image-linked
shg-align-center
"
id="s-473767af-0ae6-477a-99aa-34b88b50ccc3"
>
<img
alt="home-2"
class="shogun-image shogun-lazyloaded"
src="https://i.ibb.co/5csM0mB/home-2.jpg"
/>
</div>
</div>
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div
class="
shg-c
shogun-image-container shogun-image-linked
shg-align-center
"
id="s-aeda953a-d6c9-43d0-af79-2a147510b9e1"
>
<img
alt="home-3"
class="shogun-image shogun-lazyloaded"
src="https://i.ibb.co/RTkBRH7/home-3.jpg"
/>
</div>
</div>
</div>
</div>
<div class="shg-c" id="s-7dcad350-4935-4067-9151-0e40a74a0293">
<div class="shg-row" data-col-grid-mode-on="">
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div
class="
shg-c
shogun-image-container shogun-image-linked
shg-align-center
"
id="s-74f6f2a8-3296-445f-8a98-681f7a8f599d"
>
<img
alt="home-4"
class="shogun-image shogun-lazyloaded"
src="https://i.ibb.co/Nm7JcYn/home-4.jpg"
/>
</div>
</div>
<div class="shg-c-lg-6 shg-c-md-6 shg-c-sm-6 shg-c-xs-12">
<div
class="
shg-c
shogun-image-container shogun-image-linked
shg-align-center
"
id="s-2451ce00-7a9c-4bb1-9bc2-90e120b4ca6a"
>
<img
src="https://i.ibb.co/FhNn7Xg/home-5.jpg"
alt="home-5"
class="shogun-image"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/slide-show.js"></script>
</body>
</html>我为您制作了一个模板，如果您愿意，可以自定义并重复用于其他项目
；画廊"；类是定义行和列的主网格容器
网格模板：repeat(7,5vw(/repaint(8,1fr(
意味着7行5 vw每个
8列每个
1个小数单位1fr是可用空间的一部分
每个网格项定义为网格行和网格列，您可以调整"；跨度"；以及起始号和结束号。以及简单地删除你不需要的东西。
gallery_img类使得每个img都占据了整个网格空间。
希望这能帮助一些。。。
.gallery {
background-color: #f9f7f6;
grid-column: full-start / full-end;
display: grid;
/*grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 5vw);*/
grid-template: repeat(7, 5vw)/repeat(8, 1fr);
grid-gap: 1.5rem;
padding: 1.5rem;
}
.gallery__item--1 {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
background: black;
}
.gallery__item--2 {
grid-row: 1 / span 3;
grid-column: 3 / span 3;
background: yellow;
}
.gallery__item--3 {
grid-row: 1 / span 2;
grid-column: 6 / 7;
background: orange;
}
.gallery__item--4 {
grid-row: 1 / span 2;
grid-column: 7 / -1;
background: blue;
}
.gallery__item--5 {
grid-row: 3 / span 3;
grid-column: 1 / span 2;
background: purple;
}
.gallery__item--6 {
grid-row: 4 / span 2;
grid-column: 3 / span 2;
background: red;
}
.gallery__item--7 {
grid-row: 4 / 5;
grid-column: 5 / 6;
background: green;
}
.gallery__item--8 {
grid-row: 3 / span 2;
grid-column: 6 / span 2;
background: brown;
}
.gallery__item--9 {
grid-row: 3 / span 3;
grid-column: 8 / -1;
background: teal;
}
.gallery__item--10 {
grid-row: 6 / span 2;
grid-column: 1 / 2;
background: magenta;
}
.gallery__item--11 {
grid-row: 6 / span 2;
grid-column: 2 / span 2;
background: black;
}
.gallery__item--12 {
grid-row: 6 / span 2;
grid-column: 4 / 5;
background: brown;
}
.gallery__item--13 {
grid-row: 5 / span 3;
grid-column: 5 / span 3;
background: lightblue;
}
.gallery__item--14 {
grid-row: 6 / span 2;
grid-column: 8 / -1;
background: pink;
}
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}<section class="gallery">
<figure class="gallery__item gallery__item--1"><img src="" alt="Gallery image 1" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--2"><img src="" alt="Gallery image 2" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--3"><img src="" alt="Gallery image 3" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--4"><img src="" alt="Gallery image 4" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--5"><img src="" alt="Gallery image 5" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--6"><img src="" alt="Gallery image 6" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--7"><img src="" alt="Gallery image 7" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--8"><img src="" alt="Gallery image 8" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--9"><img src="" alt="Gallery image 9" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--10"><img src="" alt="Gallery image 10" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--11"><img src="" alt="Gallery image 11" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--12"><img src="" alt="Gallery image 12" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--13"><img src="" alt="Gallery image 13" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--14"><img src="" alt="Gallery image 14" class="gallery__img"></figure>
</section>