Image Grid within a section-Please help

Hello good people,

I’m trying to create a section that has 2 divs. 1 division is 30% width and contains text. While the other 70% is an image grid. I can’t get the 2 divisions to be side by side. Currently, my text paragraph is on top of my grid. What am I doing wrong? Below is my CSS. Thank you all.

.guitars { -----------------/ * section * /
height: 1000px;
width: 100%;
display: inline-block;
}
.guitarText { -------------/ * text < div > * /
width: 30%;
}
.guitarImages { -------- / * image < div > container * /
justify-items: start;
display: grid;
grid-template: repeat (8, 1fr) / repeat (8, 1fr);
grid-gap: 20px;
height: 100%;
width: 70%;
}

The divs are still block level elements even if you set a width. They need to be inline-block.

You can also just make .guitars (assume its the parent) a grid or flexbox container.

Setting the display: flex of .guitars (the parent) fixes the issue. But I don’t understand why display: inline-block wouldn’t work.

Thanks lasjorg. I appreciate your help.

Yes, I forgot to mention if you make them inline-block they won’t be side by side with 30/70 because of the whitespace. There are a few different way of removing it.

Oh boy. I just read that article but it doesn’t seem to explain why inline-box wouldn’t work in my scenario because even when I have the total width of both my divisions to be 60-80% of the parent width it doesn’t fit on a line.

Nevertheless, I thank you once again for your help. I’m going to use flexbox. To hell with inline-block :wink:

Just to be clear, it doesn’t matter that the parent is inline-block, the children .guitarText and .guitarImages needs to be inline-block. Which means, at least for the .guitarImages it would need it’s own parent container to still be able to use grid.

I see…

So because .guitarImages (child #2) which is a grid container itself would not work because .guitars (parent) is not a grid container.

However, its possible to have the parent be a flexbox and the child to be a grid container.

Is that right?

No the parent of the two divs does not have to be anything. But the image grid div would need its own container and that can then be inline-block.

Quick and ugly example but it is just to show what I mean.

You cleared up a fundamental misunderstanding I had. That is, child elements would inherit the display: “X” properties of parents.

Thank you for taking the trouble. =)