如何在css网格内定位项目？答案

【问题标题】：how to position items inside css grid?如何在css网格内定位项目？
【发布时间】：2022-02-12 04:33:42
【问题描述】：

我正在学习 CSS 网格并尝试在网格内定位项目？

可以从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);

在这里放一个完整的 CSS：

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>

它看起来像这样。如何垂直放置它们？如何定位从 javascript 创建的元素？

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

【问题讨论】：

请分享您的完整 CSS 和 HTML 代码（尽管 HTML 是动态构建的，但她是最终结构）
尝试将display: inline-flex;和align-items: center添加到css中的.content类..

标签： javascript css

【解决方案1】：

首先，出于同样的目的，我建议不要将 flexbox 与网格一起使用，因为它会破坏您对网格的理解。无论如何，这是代码

<!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>

【讨论】：