Divs inside a grid item? - html

Question

I am using a Grid layout, and I am trying to place an image next to a text inside of the same griditem. The image is like an icon and supposed to be right next to the text (as it's placed in the code below). The text next to it is also supposed to have a different color and font than the rest of the text. I previously tried this with a span. However, when I use any of those tags inside the griditem it kinda breaks the grid. Instead of being a normal wall of text, it's suddenly all next to each other. I've been trying to figure this out for a couple hours now, can anyone help?
.container {
display: grid;
grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
grid-gap: 3px;
grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}
.text {
display: flex;
grid-area: t;
font-size: 1vw;
font-family: Verdana;
border: 1px solid #3f3f3f;
border-radius: 25px;
padding: 2%;
}
<div class="container">
<div class="text">Hi!<br><br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
<br><br> Having a SuperBath.co.uk account will give you the following perks:<br>
<br>
<img src="..scratches/Drop.jpg">Saved personal details<br> Personal data is instantly available as you log in with your email address and password. <br><br>
</div>
</div>

Answer 1

The main problem here is that because you use display: flex on text, the img becomes a flex row item and the text before and after the image, will become anonymous flex items, hence they line up side-by-side.
There is mainly two ways to solve that, where one solution is to wrap the whole text/image chunk in a span, and then, to enable a different color on the text next to the img, also wrap it with a span.
Stack snippet
.container {
display: grid;
grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
grid-gap: 3px;
grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}
.text {
display: flex;
grid-area: t;
font-size: 1vw;
font-family: Verdana;
border: 1px solid #3f3f3f;
border-radius: 25px;
padding: 2%;
}
.text span span {
color: blue /* added */
}
<div class="container">
<div class="text"><span>Hi!
<br>
<br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
<br>
<br> Having a SuperBath.co.uk account will give you the following perks:
<br>
<br>
<img src="http://placehold.it/15/00f"><span>Saved personal details</span>
<br> Personal data is instantly available as you log in with your email address and password.
<br>
<br></span>
</div>
</div>
Or as suggested in a comment, simply remove display: flex from the text, and only wrap the text that should have different color with a span.
Stack snippet
.container {
display: grid;
grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
grid-gap: 3px;
grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
}
.text {
grid-area: t;
font-size: 1vw;
font-family: Verdana;
border: 1px solid #3f3f3f;
border-radius: 25px;
padding: 2%;
}
.text span {
color: blue /* added */
}
<div class="container">
<div class="text">Hi!
<br>
<br> Just a quick note to say thank you for making an account with SuperBath.co.uk!
<br>
<br> Having a SuperBath.co.uk account will give you the following perks:
<br>
<br>
<img src="http://placehold.it/15/00f"><span>Saved personal details</span>
<br> Personal data is instantly available as you log in with your email address and password.
<br>
<br>
</div>
</div>