Question

我正在创建一个包含2行6张图像的网页。我想使网格看起来 like that，但我做得不好。我想我尝试了一切，但没有任何工作像我期望的那样。我看了一些教程，但我真的不知道为什么它不起作用。有人可以告诉我我在做什么错吗？

HTML

where

SCSS

<section id="section-a">
        <div class="image-wrapper">
            <figure class="image1">
               <img src="img/card1.jpg" alt="">
            </figure>
            <figure class="image2">
               <img src="img/card2.jpg" alt="">
            </figure>
            <figure class="image3">
                 <img src="img/card3.jpg" alt="">
            </figure>
            <figure class="image4">
                 <img src="img/card4.jpg" alt="">
            </figure>
            <figure class="image5">
                <img src="img/card5.jpg" alt="">
            </figure>
            <figure class="image6">
                <img src="img/card6.jpg" alt="">
            </figure>
            </div>             
</section>

Answer 1

在这里是问题的答案：


<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.item5 {
  grid-column: 3 / span 2;
  grid-row: 2;
}
.item6{

}
</style>
</head>
<body>

<h1>A Five Items Grid Layout:</h1>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>
</div>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

</body>
</html>

带有网格模板区域的网格布局

1 个答案: