Query about Layout Creation and Structure using HTML & CSS
Hi Friends! I hope you all are doing well and having a great day
I am proficient with HTML & CSS. but, I needed to know how professionally and creatively i can achieve the layout given below
12 Replies
you should probably add what you posted in #general to your question here, so it's all in one place and everyone has all the information
there was nothing much
https://codepen.io/vince1444/pen/LYXmEVb
I didn't include the heading in the grid, which in hindsight I should have, but hopefully this helps you
Also *not responsive
@vince This is exactly what I was looking for, sir! It truly is the best approach to achieve this layout. I had initially considered using two sub-containers—one for the images and one for the text content. However, I now realize that would have required additional work for responsiveness and other aspects. Your suggestion is both great and best way to achieve this layout, and I genuinely appreciate it. 🙇♂️
Glad I could help! You can also use grid-template-areas but I honestly prefer using the grid-column/grid-row approach since I don't have to name anything 😂
I must admit that I also preferred using grid-row/column approach until recently - by using areas it is so much easier to make things responsive.
yeah man
@vince sir! any idea how I can achieve this one??
Do the same thing I did
Count how many columns & rows you'll need
Seems like you'll need 5 columns and 4 rows
Specify that in the grid. And then use either grid-template-area to map out the areas for each piece or use the grid-row/grid-column method that I did
5 rows or 4 columns or the same??
Does this help?
this really helped! thankyou 🙏