如何使用 css 网格定位元素

Question

我是 css 网格的新手，我只是了解如何精确定位网格元素。我不明白的是如何将正在调整大小的项目放入此网格元素中。我会这样解释：

This is my site's layout

这是我的代码：

    <div class="container">
        <div class="header">Header</div>
        <div class="content1">Content1</div>
        <div class="content2">Content2</div>
        <div class="footer">footer</div>

    </div>

.container {
    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 80px 1fr 1fr 120px; 
    
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.container div {
    padding: 10px;
    border: 1px solid #000000;
}

.header {
    grid-column: 1 / 5;
}

.content1 {
    row-gap: 200px;
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

所以现在我想做的是在 header 框中放置一个实际的导航菜单，但我希望以某种方式仅位于此框内并在我更改该框的大小时自动调整大小。现在这就是我所做的： 2nd picture

代码：

<div class="header">
            <nav>
                <ul>
                    <li> <a text-white asp-area="" asp-page="/main">Home</a></li>
                    <li><a text-white asp-area="" asp-page="/pc">Games</a>
                       <ul>
                       <li><a text-white asp-area="" asp-page="/pc">PC</a></li>
                       <li><a text-white asp-area="" asp-page="/xbox">XBOX</a></li>
                       <li><a text-white asp-area="" asp-page="/ps">PS</a></li>
                       </ul>
                    </li>
                    <li><a text-white asp-area="" asp-page="/devices">Devices</a></li>
                    <li><a text-white asp-area="" asp-page="/pcparts">PC Parts</a></li>
                </ul>
            </nav>
        </div>

.header {
    grid-column: 1 / 5;
}


nav p {
    float: left;
    color: white;
    font-size: 20px;
    line-height: 40px;
}

nav ul {
    float: left;
    background-color: #222;
    z-index: 998;
}

nav ul li {
    float: left;
    list-style: none;
    padding: 0px 15.50px;
}

nav ul li a {
    display: block;
    font-family: arial;
    background-color: #222;
    color: #fff;
    font-size: 16px;
    padding: 26px 14px;
    text-decoration: none;
}

nav ul li ul {
    display: none;
    position: absolute;
    background-color: #222;
    outline-color: #f92525;
    padding: 0px 2px;
    padding-left: 0vh;
    left: 2px;
    width: 35px;
    border-radius: repeat (5, 4px);
}

这是错误的，我真的不知道应该怎么做。如果存在这个问题，我很抱歉，但我试图找到一个解决方案，但我无法用我从互联网上得到的任何东西解决这个问题，也不明白它应该如何。

Answer 1

一些一般提示：

不要同时使用 grid template rows 和 grid template columns 来定义您的网站布局。

相反：如果您有边栏，请使用 grid-template-columns，如果您有堆叠内容（像您一样），只需使用 display:grid; 这将强制内容相互堆叠。

不要为页眉和页脚定义静态高度

改为：使用内部元素的间距（margin 和 padding）使您的容器响应。

进一步熟悉 Flexbox 和网格，以便轻松开始为您的网站建模，例如分隔菜单项等等。

下面是这些技巧的一个例子：

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 padding: 1rem;
}

.main {
 display: grid;
}


.nav, .content {
 display: flex;
 justify-content: center;
 align-items: center;
 border: 2px solid black;
}

.nav {
 padding: 2rem;
}

.content {
 padding: 5rem;
}

<div id="main">
  <header class="nav">Header</header>
  <div class="content">Content 1</div>
  <div class="content">Content 1</div>
  <footer class="nav">Footer</footer>
</div>

如何使用 css 网格定位元素

How to position elements using css grid

css

css-position

css-grid