Sub-grid help |
Sub-grid help |
JUI43555 |
Mar 12 2023, 03:01 AM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi, how do I make 3 individual sections / cards within the aside section. Need to use only semantic HTML.
I'll need to put a <h2> and a <p> and populate them with lorem ipsum. CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Template Areas</title> <link rel="stylesheet" href="grid.css"> </head> <body> <header>Header</header> <nav>Nav Bar</nav> <main>Main</main> <aside>Aside</aside> <footer>Footer</footer> </body> </html> CODE * { box-sizing: border-box; padding: 20px; margin: 1px; } body { background-image: url(./_images/Background\ image\ wallpaper.jpg); font-family: 'Open Sans', sans-serif; font-size: 16px; height: 100vh; display: grid; grid-template-areas: 'header header header' 'nav nav nav' 'aside main main' 'aside main main' 'footer footer footer'; grid-template-columns: 40% 70%; grid-template-rows: 100px 50px 600px 100px; } header, nav, aside, main, footer { background-color: rgb(151, 142, 131); opacity: 95%; color: #fff; padding: 20px; border: skyblue 1px solid; } header{ grid-area: header; } nav { grid-area: nav; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; } This post has been edited by JUI43555: Mar 12 2023, 03:02 AM |
Lo-Fi Version | Time is now: 27th April 2024 - 10:40 AM |