CODEWITHSUNDEEP
htmlcsssass
Zirdan
Zirdan

Reputation: 23

Grid layout with grid-template-areas

I am creating a webpage with 6 images in 2 lines. I want to make grid to looks like that, but i can't do it properly. I think i tried everything and nothing works like I was expected. I watched some tutorials and i really don't know why it doesn't work. Could someone tell me what am I doing wrong?

HTML

<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>

SCSS

#section-a {
.image-wrapper {
    display: grid;
    grid-template-areas: 
    "grid1 grid2 grid3 grid4"
    "grid5 grid2 grid6 grid6";
    grid-gap: 1rem;

    .image1 {
        grid-area: grid1;
    }

    .image2 {
        grid-area: grid2;
    }

    .image3 {
        grid-area: grid3;
    }

    .image4 {
        grid-area: grid4;
    }

    .image5 {
        grid-area: grid5;
    }

    .image6 {
        grid-area: grid6;
        }
    }
}

Upvotes: 2

Views: 59

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

enter image description hereHere is answer to question : 


<!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>

Upvotes: 2

Related Questions