Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

pdiaz
pdiaz
16,073 Points
Posted by pdiaz
pdiaz
16,073 Points

Need help with grid layout taking the full length of the screen.

I need help with this problem I've been having. I want to have a 3 div rows with 3 columns that has 1 image inside each column. The problem is that I want the images to always take the full view-port of the browser but no matter what I do, the images keep going below the scene. I have set the container height to 100vh and nothing. I've used width: calc((100% - 300px) / 3); but can't find a solution. This seems to be a simple problem and I bet the answer is easy but I'm unable to find it.

2 Answers

chrisdev
chrisdev
16,941 Points
chrisdev
chrisdev
16,941 Points

Is this what you're looking for?

HTML:

<div class="container">

<div class="yourclass">
   <img src="/image.jpg" />
</div>

<div class="yourclass">
   <img src="/image.jpg" />
</div>

<div class="yourclass">
   <img src="/image.jpg" />
</div>

</div>

CSS:

.container {
   width: 100%;
}

.yourclass {
   width: 33.33333%;
}

.yourclass img {
   width: 100%;
}
pdiaz
pdiaz
16,073 Points
pdiaz
pdiaz
16,073 Points

Not quite, the problem comes in when re-sizing the browser. The images grow bigger and go below the view-port. I am trying to get the page to load images in proportional sizes having the 3 rows always fill the screen.

chrisdev
chrisdev
16,941 Points

Oh I think I get what you're trying to do now.

Set the parent container's height to: height: 100vh;

Set all the children (your rows) to: height: 33.33333vh;

Than make sure you have the width's all at 100%. Container width, row width, and image width inside the row.

How does that work out for you?

.container {
   height: 100vh;
}

.row {
   height: 33.33333vh
}
pdiaz
pdiaz
16,073 Points
pdiaz
pdiaz
16,073 Points

Thanks so much it works but do you also happen to know how to make the images have the same effect as background-size: cover?

chrisdev
chrisdev
16,941 Points
chrisdev
chrisdev
16,941 Points

If you want your images to have the same effect as background-size: cover, you just need to apply your images and background images, like this:

background-image: url(/path/to/your/image.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

If you're placing the image in normally like <img src="" /> then the closest way is to give the images a width of 100%, but it will depend on the dimensions of your image. If you know the exact width and height of each row, you can re-size your image to be those exact dimensions form full screen, then it will scale down in responsive devices. For example make your images 1920px in width and 450px in height.