Grid overflow on Y axis while using grid-template-areas

user_18277473 0
Viewed 24

So i tried to make a grid using grid-template-areas but when i start using grid-gap i noticed that the grid items started overflowing on Y axis. I solved this problem using padding as i thought it would work as a grid-gap but i quess maybe there is a better solution to that? Shall I use grid-template-columns//rows instead?

HTML

<div class="container-grid-main-page">
            <div class="container-grid-img" style="grid-area: grid-main-page-img1"><img src="ex.jpg" alt=""></div>
            <p style="grid-area: grid-main-page-descr1;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
            <div class="container-grid-img" style="grid-area: grid-main-page-img2"><img src="ex.jpg" alt=""></div>
            <p style="grid-area: grid-main-page-descr2;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
            <div class="container-grid-img" style="grid-area: grid-main-page-img3"><img src="ex.jpg" alt=""></div>
            <p style="grid-area: grid-main-page-descr3;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
            <div class="container-grid-img" style="grid-area: grid-main-page-img4"><img src="ex.jpg" alt=""></div>
            <p style="grid-area: grid-main-page-descr4;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
        </div>

CSS

.container-grid-main-page{
    border:solid;
    width:50%;
    height: auto;
    min-height: min-content;
    display: grid;
    grid-template-areas: 
    "grid-main-page-img1 grid-main-page-img2"
    "grid-main-page-descr1 grid-main-page-descr2"
    "grid-main-page-img3 grid-main-page-img4"
    "grid-main-page-descr3 grid-main-page-descr4";
    place-items: center;
    text-align: center;
}
.container-grid-main-page > *{
    padding: .5rem;
}
.container-grid-img img{
    width: 100%;
}
css html
1 Answers

Yes. use grid-template-columns and grid-template-rows. I used margin: 0 auto for p tags and a font-size: 0.6em, for fit to a height of 100vh:

.container-grid-main-page {
  width: 50%;
  display: grid;
  column-gap: 5px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 25vh 25vh 25vh 25vh;
  text-align: center;
  font-size: 0.6em;
}

.container-grid-img img {
  width: 100%;
  height: 100%;
}

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

.item2 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
p{
  margin: 0 auto;
}
<div class="container-grid-main-page">
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <div class="container-grid-img item1"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <div class="container-grid-img item2"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
</div>

With flex:

* {
  box-sizing: border-box;
}

.container-grid-main-page {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.6em;
}

.container-grid-main-page div {
  flex-basis: 50%;
  height: 25vh;
}

.container-grid-main-page p {
  flex-basis: 50%;
  height: 25vh;
  margin: 0 auto;
}

.container-grid-img img {
  width: 100%;
  height: 100%;
}
<div class="container-grid-main-page">
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <div class="container-grid-img"><img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt=""></div>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil nesciunt soluta hic ducimus magnam repudiandae.</p>
</div>

user_170071840
Related