0

I'm trying to design this layout using css grids, so I set a container with 12 columns and a gutter of 20px; the problem is that the rows height would be variable, and also I haven't been able to put 3 images in the same row. I don't understand also why there are some images that don't even stay within the grid

This is my attempt, can you help me understand what I'm doing wrong?

thanks!

.container {
  width: 100vw;
  font-family: helvetica, arial, sans-serif;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  padding: 0 50px;
}
.container .title h1 {
  font-size: 60px;
}
.container .title h2 {
  font-size: 40px;
  font-weight: 400;
  text-decoration: underline;
}
.container .title h2 a{
  color: black;
}
.container title {
  grid-column: 2 / 6;
}
.container p {
  font-family: georgia, helvetica, arial, sans-serif;
  font-size: 28px;
  grid-column: 7 / span 4;
}

#img-1 {
  grid-column: 5 / span 7;
}
#img-2 {
  grid-column: 1 / span 9;
}
#img-3 {
  grid-column: 1 / span 5;
}
#img-4 {
  grid-column: 1 / span 6;
}
#img-5 {
  grid-column: 6 / span 6;
}
<div class="container">
  <div class="title">
    <h1>Lorem Ipsum Some Project Title goes here</h1>
    <h2><a href="#">visit website here</a></h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada sapien a tristique commodo. Nam finibus metus sed sem ultrices, non fermentum tortor tincidunt. Sed vitae ornare ex. Nulla facilisi. Cras vel luctus sem. Sed rhoncus, purus eget dapibus scelerisque, lectus nisi blandit tortor, et congue eros felis non turpis. Nulla accumsan, urna eu tincidunt fermentum, orci tortor viverra sem, in interdum odio enim ut dui.</p>
<img id="img-1" class="proj-1-img" src="https://images.unsplash.com/photo-1581979847292-b1e1dc359bff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" alt="">
<img id="img-2" class="proj-1-img" src="https://images.unsplash.com/photo-1578266848416-c291bc0b2940?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="">
<img id="img-3" class="proj-1-img" src="https://images.unsplash.com/photo-1601665642592-cc3762ec91b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2624&q=80" alt="">
<img id="img-4" class="proj-1-img" src="https://images.unsplash.com/photo-1601665642756-5a528e2b447d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
<img id="img-5" class="proj-1-img" src="https://images.unsplash.com/photo-1601680228045-3a07148a8d2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
  
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
baband
  • 123
  • 12
  • Because all rows will be the same height, so you need to rethink your layout – Paulie_D Oct 04 '20 at 17:56
  • https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid – Paulie_D Oct 04 '20 at 17:57
  • @Paulie_D how that value set? the row's height will be the first row height? or the highest one among all the rows? – baband Oct 04 '20 at 17:59
  • 1
    No. Each row will have its own height but your layout will not accommodate that. You have different size images in the same row – Paulie_D Oct 04 '20 at 18:02
  • So I need to set a layout for the rows as well and specify it for each item correct? Or I was also thinking to nest a 12 colum grids for each row and make them as separate divs, so several inner grids instead of one external, would you reccomend this solution? – baband Oct 04 '20 at 18:16

0 Answers0