我目前正在尝试使用HTML / CSS创建网格布局。我有以下代码
<section class="home-d ">
<div class="container">
<h2 class="l-heading py-3">hot news</h2>
<div class="articles-container">
<!-- Article 1 -->
<article class="card">
<img src="./img/hot-news-img/post-1-img@1X(2).png" alt="" />
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 2 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-2-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
</div>
<!-- Article 3 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-3-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Western Pyramid Resort in Egypt</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 4 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-4-img@1X(2).png" alt="" />
<div class="article-content">
<h3>Grand Meadows Resort in Maldives</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 5 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-5-img.png" alt="" />
<div class="article-content">
<h3>Wanderlust Resort in Tenerife</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 6 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-6-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Twin Sanctuary Hotel in Great Britain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 7 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-7-img@1X.png" alt="" />
<div class="article-content">
<h3>Prism Hotel in Ireland</h3>
</div>
<!-- Article 8 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-8-img@1X.png" alt="" />
<div class="article-content">
<h3>King's Shroud Resort in Spain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
</article>
</div>
</div>
</section>
CSS
.container {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.home-d {
text-align: center;
}
.home-d .articles-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
text-align: center;
align-items: center;
}
.home-d .articles-container>*:first-child,
.home-d .articles-container>*:first-child {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
align-items: center;
grid-column: 1 / span 2;
}
.home-d .articles-container>*:last-child {
grid-column: 2 / span 2;
}
.card{
border:1px solid #3333;
}
这里是链接https://jsfiddle.net/familagash/dfvhrxq5/。 运行代码时看起来像这样。 但我想这样enter image description here
我进行了搜索，但是找不到。 İt有很多网格卡示例，但我找不到任何示例来做。谁可以帮助我？
答案 0 :(得分：0)
您可以使用此代码。
建议：在这种情况下，最好使用背景而不是图像。
.home-d { text-align: center; }
.home-d .articles-container { padding: 15px; display: grid; grid-template-columns: 70% 30%; grid-gap: 15px; text-align: center; }
.home-d .articles-container.equal { grid-template-columns: repeat(2,50%); }
.side-by-side { display: grid; grid-template-columns: repeat(2,50%); align-items: center;}
.home-d .articles-container:last-child { grid-template-columns: 30% 70%; }
.home-d .articles-container img { width: 100%; }
.card { background: #f9f9f9; }
.side-by-side .article-content { padding: 15px; text-align: right; }<section class="home-d ">
<div class="container">
<h2 class="l-heading py-3">hot news</h2>
<div class="articles-container">
<!-- Article 1 -->
<article class="card side-by-side"><!-- added class -->
<a href="https://imgbb.com/"><img src="https://i.ibb.co/DpqKJJK/latest-post-4-img-1-X.png" alt="latest-post-4-img-1-X" border="0"></a>
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 2 -->
</article>
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/khd8mFv/latest-post-3-img-1-X.png" alt="latest-post-3-img-1-X" border="0"></a>
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
</div>
<!-- Article 3 -->
</article>
</div>
<div class="articles-container equal"> <!-- added class -->
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/khd8mFv/latest-post-3-img-1-X.png" alt="latest-post-3-img-1-X" border="0"></a>
<div class="article-content">
<h3>Western Pyramid Resort in Egypt</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 4 -->
</article>
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/SJMzkLV/latest-post-6-img-1-X.png" alt="latest-post-6-img-1-X" border="0"></a>
<div class="article-content">
<h3>Grand Meadows Resort in Maldives</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 5 -->
</article>
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/SJMzkLV/latest-post-6-img-1-X.png" alt="latest-post-6-img-1-X" border="0"></a>
<div class="article-content">
<h3>Wanderlust Resort in Tenerife</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 6 -->
</article>
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/41rKvWn/Layer-22-1-X.png" alt="Layer-22-1-X" border="0"></a>
<div class="article-content">
<h3>Twin Sanctuary Hotel in Great Britain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 7 -->
</article>
</div>
<div class="articles-container">
<article class="card">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/41rKvWn/Layer-22-1-X.png" alt="Layer-22-1-X" border="0"></a>
<div class="article-content">
<h3>Prism Hotel in Ireland</h3>
</div>
<!-- Article 8 -->
</article>
<article class="card side-by-side"><!-- added class -->
<a href="https://imgbb.com/"><img src="https://i.ibb.co/41rKvWn/Layer-22-1-X.png" alt="Layer-22-1-X" border="0"></a>
<div class="article-content">
<h3>King's Shroud Resort in Spain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
</article>
</div>
</div>
</section>
答案 1 :(得分：0)
我已修复您的html结构，以使内容更易于布局。我还使用了SCSS和一些高级技术，可以检查以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400,600,800&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section class="home-d ">
<div class="container">
<h2 class="news__heading">hot news</h2>
<div class="articles-container">
<div class="article__section-1">
<article class="article__card">
<img src="https://www.offpeakluxury.com/db_library/matfen-hall-hotel/1024x768_8QWAR_11332img-16876-1.jpg" alt="latest-post-4-img-1-X" border="0">
<div class="article__content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
</article>
<article class="article__card">
<img src="https://i.ibb.co/khd8mFv/latest-post-3-img-1-X.png" alt="latest-post-3-img-1-X" border="0">
<div class="article__content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
</div>
</article>
</div>
<div class="article__section-2">
<article class="article__card">
<img src="http://www.bellamarhotel.com/wp-content/blogs.dir/386/files/photogallery-hotel/emsa_b_62.jpg" alt="latest-post-3-img-1-X" border="0">
<div class="article__content">
<h3>Western Pyramid Resort in Egypt</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 4 -->
</article>
<article class="article__card">
<img src="http://www.bellamarhotel.com/wp-content/blogs.dir/386/files/photogallery-hotel/emsa_b_62.jpg" alt="latest-post-6-img-1-X" border="0">
<div class="article__content">
<h3>Grand Meadows Resort in Maldives</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 5 -->
</article>
<article class="article__card">
<img src="http://www.atlanticahotels.com/userthumbs/reservation/64773c28-ae74-46f9-b52a-940cc548d4ca/hotelimages/thumbs_1920x/aphrodite-hills-hotel-by-atlantica-deluxe-room-swim-up.jpg" alt="latest-post-6-img-1-X" border="0">
<div class="article__content">
<h3>Wanderlust Resort in Tenerife</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 6 -->
</article>
<article class="article__card">
<img src="http://www.atlanticahotels.com/userthumbs/reservation/64773c28-ae74-46f9-b52a-940cc548d4ca/hotelimages/thumbs_1920x/aphrodite-hills-hotel-by-atlantica-deluxe-room-swim-up.jpg" alt="Layer-22-1-X" border="0">
<div class="article__content">
<h3>Twin Sanctuary Hotel in Great Britain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 7 -->
</article>
</div>
<article class="article__card">
<img src="https://i.ibb.co/41rKvWn/Layer-22-1-X.png" alt="Layer-22-1-X" border="0">
<div class="article-content">
<h3>Prism Hotel in Ireland</h3>
</div>
<!-- Article 8 -->
</article>
<article class="article__card">
<a href="https://imgbb.com/"></a><img src="https://i.ibb.co/41rKvWn/Layer-22-1-X.png" alt="Layer-22-1-X" border="0"></a>
<div class="article-content">
<h3>King's Shroud Resort in Spain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
*,*::after, *::before{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Raleway', sans-serif;
line-height: 1.5;
color: #333333;
}
.container{
text-align: center;
width: 1200px;
margin: 0 auto;
}
.news{
&__heading{
text-transform: uppercase;
color: rgb(0, 169, 236);
font-weight: 800;
margin: 3rem;
font-size: 3.5rem;
}
}
.article{
&__section-1{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: auto;
grid-gap: 3rem;
.article{
&__card{
display: flex;
text-align: right;
align-items: center;
font-size: 1rem;
background-color: #f3f3f3;
&:first-child {
grid-column: 1/4;
img{
height: 19rem;
object-fit: cover;
// width: 25rem;
}
}
&:last-child{
flex-direction: column;
img{
// height: 10rem;
object-fit: cover;
width: 100%;
}
}
}
&__content{
padding: 2rem;
}
}
}
&__section-2{
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 4.5rem;
.article{
&__card {
background-color: #f3f3f3;
img{
width: 100%;;
}
}
&__content {
padding: 2rem;
}
}
}
}