I have a div of class text which contains text with flex as display and have another div called images that has 4 images aligned using grid display. My concern is that I cannot have them on the same level. If i give the text container a margin top property to align it with the image container, the image container comes down as well leaving me with uneven alignment
.text {
width: 50%;
padding-top: 30px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
grid-area: text;
}
.text>h2 {
text-align: left;
}
.text>p {
line-height: 1.5em;
height: 6em;
/* height is 2x line-height, so two lines will display */
overflow: hidden;
}
.images {
float: right;
width: 50%;
display: grid;
grid-template-areas: "a a a a b b b b" "c c c c d d d d";
gap: 10px;
align-items: center;
/* left and right */
justify-content: center;
}
img {
width: 350px;
height: 200px;
}
.img1 {
grid-area: a;
}
.img2 {
grid-area: b;
}
.img3 {
grid-area: c;
}
.img4 {
grid-area: d;
}<div class="text">
<h2>Straight from the oven</h2>
<p>Pizza is the world’s greatest food. Nothing says “I love you,” “I’m sorry,” or “Let’s be friends,” better than pizza. It’s a universal love language, and is perfect at any time, for any occasion, especially when you don’t know what to say. Here at The
Corleone's we understand your sentiments and will give a taste you can never stop singing praises of!</p>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg" alt="" class="img1">
<img src="https://listerr.in/wp-content/uploads/2021/03/pizza_hut.5a98457c37496.png" alt="" class="img2">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F9%2F2021%2F06%2F15%2Fmozzarella-pizza-margherita-FT-RECIPE0621.jpg&q=85" alt="" class="img3">
<img src="https://media.istockphoto.com/photos/picking-slice-of-pepperoni-pizza-picture-id1133727757?k=20&m=1133727757&s=612x612&w=0&h=WAx4F4efU3Yx3Qu15iUgTMtB7G_kbmh-DqAvL4aNfeE=" alt="" class="img4">
</div>I have been practicing web development for 2 months now. Any help or guidance would be highly appreciated! Thanks a ton!
So, I'm not entirely sure if this is what you're after, but what I gathered is that you want both of your main divs to be shown on the same layer. For this, I've just encased both elements in a flex container and I've removed the grid-template-areas, which you can still use if you want.
I've also removed the "Float" property because it can often mess up a lot of other layout features, hope it helps and if not let me know how I can improve the answer
.containing_div {
display: flex;
}
.text {
width: 50%;
padding-top: 30px;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
grid-area: text;
}
.text > h2 {
text-align: left;
}
.text > p {
line-height: 1.5em;
height: 6em;
overflow: hidden;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
justify-content: center;
align-items: center;
}
img {
width: 350px;
height: 200px;
}<div class="containing_div">
<div class="text">
<h2>Straight from the oven</h2>
<p>Pizza is the world’s greatest food. Nothing says “I love you,” “I’m sorry,” or “Let’s be friends,” better than pizza. It’s a universal love language, and is perfect at any time, for any occasion, especially when you don’t know what to say. Here at The
Corleone's we understand your sentiments and will give a taste you can never stop singing praises of!</p>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg" alt="" class="img1">
<img src="https://listerr.in/wp-content/uploads/2021/03/pizza_hut.5a98457c37496.png" alt="" class="img2">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F9%2F2021%2F06%2F15%2Fmozzarella-pizza-margherita-FT-RECIPE0621.jpg&q=85" alt="" class="img3">
<img src="https://media.istockphoto.com/photos/picking-slice-of-pepperoni-pizza-picture-id1133727757?k=20&m=1133727757&s=612x612&w=0&h=WAx4F4efU3Yx3Qu15iUgTMtB7G_kbmh-DqAvL4aNfeE=" alt="" class="img4">
</div>
</div>