Kevin Powell - Community•2y ago

Need Help with Grid

Code Pen: https://codepen.io/Arslan-Akbar/pen/poOMadb Images included also with grids So I'm trying to learn grid by making a small project. I made 2 column 3 fr (main-content) 1fr (side content) 3fr (main-content) contains (gap: 1.2rem) - games gallery column (using grid) (1fr 1fr 1fr) 1fr (Side Content)(I have the picture on side to kind of represent something there that exceed the height of left content) if the side contents height is more than the content on the main-content area. It leaves empty area inside each of the games image inside games galley. Images below for reference. Once again I'm new. Fix I've tried. using grid-template-rows: auto; does nothing tried using grid-template-rows: max-content or min-content (both are doing the same thing currently; but I have to use it as many row I've got. Like if I currently got 2 ROWS. I can use it 2 times or once as empty space is only created below the image. But if in case i add more images, I have to add more rows into grid-template to it every time they increase. Can it not be more automated.

7 Replies

Kevin Powell•2y ago

If I understand, you want all the cells to always be full. If that's the case, they already are, and by default. The issue is, you're using images, which aren't stretching. The image on the right side has a fixed height, so it's always going to be 700px. If you add this to your CSS, no matter the size, you'll see the actual size of the grid cells, and you'll see that there is no empty space.

.game_card,
.side_wrapper {
  background: lightblue;
}

.game_card,
.side_wrapper {
  background: lightblue;
}

The .card_card, .side_wrapper and .game_cards are grid-items, the images are just living inside of them doing their own thing. If you don't mind the images being cropped, then you can use

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

If you don't want them to become cropped at any size, there isn't much you can do, since they will always maintain their aspect-ratio.

Malik•2y ago

Well didn't expect to be answered by the Master himself. I think I got the idea of how grid works. Really thankful of you for your amazing lessons on YouTube. Once again Thank You Sir. Just looked more into it. Made a wrapper around the game_cards to separate it from the main_content_wrapper. . Well I think I got it how I wanted and understood how things inside grid interact. Do you think my observation is right? https://codepen.io/Arslan-Akbar/pen/poOMadb

vince•2y ago

vince•2y ago

This is what it looks like on mobile https://codepen.io/vince1444/pen/VwEwvZE is what you want?

Malik•2y ago

yes. Well for mobile I can make a break point. But the main idea was if ever in future I use it and right side content's(adding multiple things) height is more than left side content. As the cards were first living inside of the grid and were changing heights making a space (because image is not changing size). Because of that only the wrapper is now changing it's shape but the cards which have another display grid on them to make a gallery do not get effected. That's why I made a wrapper. Do you think the basic idea is right of me making a wrapper so the cards are not being effected. Could there be a better solution.

Malik•2y ago

that's how it looked before.

Malik•2y ago

for mobile

Gaming

Programming

Need Help with Grid