CODEWITHSUNDEEP
javascriptcss
Terry
Terry

Reputation: 117

how to position items inside css grid?

I'm learning the CSS grid and trying to position the items inside the grid?

can get and see data from javascript:

const profileImg = document.createElement('img');
var profilePhotoUrl = post.user.get("photo").url();
profileImg.src = profilePhotoUrl;
profileImg.className = "profile";

const username = document.createElement('username');
username.className = "user";
username.innerText = post.name;
const content = document.querySelector('.content'); 
content.append(profileImg, username);

putting a full CSS here:

body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    display: grid;
    margin: 0;
    grid-template-columns: 20% auto;
    grid-template-rows: 60px auto 100px;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "sidebar footer";
}
header {
    position: sticky;
    grid-area: header;
    background-color: rgb(0, 0, 0);
   
}
aside {
    grid-area: sidebar;
    background-color: lightsteelblue;
}
.content {
    display: inline-flex;
    align-items: center;
}

footer {
    grid-area: footer;
    background-color: rgb(121, 121, 121);
    padding: 10px;
}

.user { 
    grid-area: user; 
    font-size: 10pt;
    
 }

.profile {
    grid-area: profile;
 }

HTML:

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css">
    
    </head>
    <body>
        <aside>
            <ul>
                <li><a href="#">home</a></li>        
                <li><a href="#">about</a></li>   
                <li><a href="#">service</a></li>   
                <li><a href="#">contact</a></li>   
            </ul>
        </aside>

        <header>
            <h1>Diky</h1>
        </header>
        <div class="content">
            
        </div>
        <footer>
            <p>this is my footer</p>
        </footer>
        <script src="app.js"></script>
    </body>
    </html>

And it looks like this. How can I position them vertically? How can I position elements that are created from javascript?

(profile username) <--like this
(profile username)
(profile username)

enter image description here

Upvotes: 0

Views: 205

Answers (1)

PythonProgrammer
PythonProgrammer

Reputation: 226

Firstly, I'd recommend not to use flexbox with grid, for the same purpose, as it ruins your understanding of grid.

Here's the 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>Document</title>
    <style>
  /*    Main grid container styling */

  .grid-container{
display: grid;
/* This is used for the position into 3 columns */
grid-template-columns: 1fr 1fr 1fr;
/* For the margin between the three items */
grid-gap: 1rem;
/* For centering of items */
justify-content: center;
align-items: center;
  }


  /* For styling of grid items */

.grid-container-items{
    height: 200px;
    width: 200px;
    background: red;
}
    </style>
</head>
<body>
<div class="grid-container">
    <div class="grid-container-items"></div>
    <div class="grid-container-items"></div>
    <div class="grid-container-items"></div>
</div>
</body>
</html>

Upvotes: 1

Related Questions