The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Sub-grid help
JUI43555
post 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.

IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 02:57 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC