0

I'm trying to achieve the effect shown in the attached image, where each grid cell will have the appropriate width and height in pixels and will be exactly the same size and layout, where the whole grid is 1009px wide and 695px high. Each cell will contain an image and text.

enter image description here

I've tried to achieve this based on documentation (https://css-tricks.com/), YouTube tutorials, and with the help of CSS grid generators, but the biggest problem I'm facing is that item4 is in a somewhat irregular layout and overlapping item1.

I would appreciate any help or guidance.

P.S: I usually work more with flexbox, my knowledge of grid is much weaker when it comes to complex layouts, but unfortunately in this case I have to use grid to arrange everything.

MY CODE:

.grid-container {
    display: grid;
    grid-template-columns: 276px 139px repeat(3, 195px);
    grid-template-rows: 320px repeat(2, 177px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    width: 1009px;
    height: 695px;
}

.item-1 {
    grid-area: 1 / 1 / 2 / 3;
}

.item-2 {
    grid-area: 1 / 3 / 2 / 6;
}

.item-3 {
    grid-area: 2 / 1 / 4 / 2;
}

.item-4 {
    grid-area: 2 / 2 / 4 / 4;
}

.item-5 {
    grid-area: 2 / 4 / 3 / 6;
    text-align: right;
}

.item-6 {
    grid-area: 3 / 4 / 4 / 6;
    text-align: right;
}

.item-1 img {
    width: 415px;
    height: 320px;
}

.item-2 img {
    width: 585px;
    height: 320px;
}

.item-3 img {
    width: 276px;
    height: 365px;
}

.item-4 img {
    width: 373px;
    height: 365px;
}

.item-5 img {
    width: 371px;
    height: 177px;
}

.item-6 img {
    width: 371px;
    height: 177px;
}
<div class="grid-container">
        <div class="item-1">
            <img src="https://nissangtr35.pl/item-1.jpg" alt="">
        </div>
        <div class="item-2">
            <img src="https://nissangtr35.pl/item-2.jpg" alt="">
        </div>
        <div class="item-3">
            <img src="https://nissangtr35.pl/item-3.jpg" alt="">
        </div>
        <div class="item-4">
            <img src="https://nissangtr35.pl/item-4.jpg" alt="">
        </div>
        <div class="item-5">
            <img src="https://nissangtr35.pl/item-5.jpg" alt="">
        </div>
        <div class="item-6">
            <img src="https://nissangtr35.pl/item-6.jpg" alt="">
        </div>
    </div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Georgy
  • 9
  • 5
  • Edit my code: I have added links to the appropriate images to the HTML to show how the layout currently looks. Each image has dimensions as shown in the picture. – Georgy Apr 29 '23 at 12:45
  • Edit: I have corrected the code, but now the distances in the top row do not match. – Georgy Apr 29 '23 at 13:10
  • 276 + 373 + 371 > 1009. – InSync Apr 29 '23 at 14:08
  • As @InSync has pointed out, the arithmetic is wrong. Are you expecting the gaps to alter to make both rows the same width? – A Haworth Apr 29 '23 at 16:38
  • If you've solved the problem, you should now either mark one of the existing answers as accepted, add your own answer and mark it as accepted, or delete the question altogether. – Brett Donald Apr 30 '23 at 04:07

1 Answers1

0

The layout itself appears to be correctly built, the issue may be in the images themselves. Since images are not provided, it may be hard to debug at this point. Maybe you could try to limit each item's image width and height accordingly?

Example:

.item-1 img {
    max-width: 415px;
    max-height: 320px;
}
Fuad
  • 350
  • 10
  • Thank you for your response, I added your suggestion to my code locally, so that each image has a specified width and height, but I still haven't achieved the result from the photo where each cell has exactly the same dimensions as the image. Additionally, in the meantime, I also noticed that I gave my column (item1) a width of 207.5px * 2, which is a width of 415px, whereas at the bottom of the column, I need a width of 276px (item3). Do you happen to know how to make the first column have 276px + 139px for item1 to fill in 415px, and below it item3 to have 276px width? – Georgy Apr 29 '23 at 13:03
  • 1
    What's the true matter of the question, since it's confusing now. Do you want the grid cells adapt their sizes to the image dimensions they contain? – Fuad Apr 29 '23 at 13:09
  • I managed to achieve the above effect with the column widths, but now the spacing in the second row doesn't match. – Georgy Apr 29 '23 at 13:11
  • After further work, I managed to improve the code a bit, but I still can't make the cells have the exact same width and height as in my drawing. My question is still valid - do you know how to make the cells (not the images) have the width and height shown in my drawing, with a 10px gap between them, so that the total value equals 1009px width and 695px height? – Georgy Apr 29 '23 at 13:17
  • 1
    In order to manage the gap you can use the `grid-gap: 10px;` attribute. In order to have the exact dimensions of cells as on the image, you will need to split the grid to proportional widths so that in multiplication by different coefficients they could fit the desired layout. You may look into [this post](https://stackoverflow.com/questions/47614008/can-i-have-a-varying-number-of-columns-per-row-in-a-css-grid). – Fuad Apr 29 '23 at 13:19
  • I managed to solve the issue, thanks to the information you provided. From the beginning, I analyzed the code and the layout, and it turned out that I made a mathematical mistake in the calculations of the layout. Thanks for the motivation :) – Georgy Apr 29 '23 at 14:03