CSS Grid Responsive Layout with HTML Semantic 😁 | Flex, Grid Template 🤯 #webdesign #webdevelopment

👉 This code creates a webpage layout with a grid using semantic HTML elements. It divides the page into sections for the header, sidebar, main content, section, content, and footer.

🧑‍💻 Basic Syntax -

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 40px 2fr repeat(4, 1fr);
grid-template-areas:
"header menu menu menu"
"hero hero hero hero"
"hero hero hero hero"
"main main image image"
"main main extra extra"
"banner banner banner banner";
}

❤️ Hit the heart icon and show your love to this video 💙
|
📲 Comment down your thoughts and doubts ✍️
|
🌸 Share with your other frontend friends and spread the exciting tricks tips 🔥

• • •

🖇️ 𝗦𝗧𝗔𝗬 𝗖𝗢𝗡𝗡𝗘𝗖𝗧𝗘𝗗 𝗙𝗔𝗠 ! 💛