如何使用CSS网格定位元素

Question

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

这是我的网站的布局

，这是我的代码：

    <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;
}

所以现在现在我想做的是在该标头盒中一个实际的导航菜单，但我希望以某种方式仅在此盒子内，并在更改该盒子的大小时自动调整大小。现在，这就是我所做的： 第二张图片

代码：

<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

一些一般提示：

1. 不要使用网格模板行和网格模板列来定义您的站点布局。

• 相反：如果您有侧边栏，请使用grid-template-columns，如果您已经堆叠了内容（像您一样），只需使用display：grid;彼此堆叠。

2. 不要为标头和页脚定义静态高度

• ：处理内部元素的间距（rus> 和padding）以使您的容器响应。

3. 熟悉Flexbox和更多的网格，以便轻松地开始建模您的网站，例如间隔菜单项等等。

• 资源：
• https://css-tricks.com/snippets/snippets/css/css/css/css/css/css /a-guide-to-to-flexbox/
• https：https：// css-tricks.com/snippets/css/complete-guide-grid/

这是这些技巧的一个示例：

* {
 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>