如何在css网格上移动元素？

Question

我想弄清楚如何使用 css 网格定位元素。 我正在使用 Firefox，我可以看到我的区域被正确定义，但是当我尝试移动一些示例内容时，它们并没有移动。

我已经阅读并尝试了很多不同的东西，但我想我实施的解决方案是错误的？

我正在尝试并排放置东西。 就像section1中的内容去sect1，sect2中的内容分别去页面上的section2。

这是我想使用 css 网格移动的 html：

    <div class="wrapper">

    <header class="header">
        <!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
        <h1>LOGO</h1>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#"><button class="nav_buttons">Login</button></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>TEXT HERE</h2>
        <div id="sect1">
            <P>MOVE ME/KEEP ME ON THE LEFT SIDE OF SCREEN</P>
        </div>
        <div id="sect2">
            <p>MOVE ME/KEEP ME ON THE RIGHT SIDE OF SCREEN</p>
        </div>
    </main>

    <footer class="foot">
    </footer>

</div>

这是我的 css 文件：

body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
background-color: #ededed;
margin: 0;
padding: 0;
}

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 5fr 1fr;
    grid-template-areas: 
        "header header"
        "sect1 sect2"
        "foot foot";
}

.wrapper .header {
    grid-area: header;
}

.wrapper main {
    grid-column: 1 / 3;
}

.wrapper main #sect1 {
    grid-area: sect1;
    background-color: lightcyan;
}

.wrapper main #sect2 {
    grid-area: sect2;
    background-color: lightpink;
}

.foot {
    grid-area: foot;
    background-color: rgb(255, 0, 0);
}

Answer 1

我认为您可以使用subgrid为后代指定网格。 通过这种方式：

 body { font-family: 'Roboto', sans-serif; box-sizing: border-box; background-color: #ededed; margin: 0; padding: 0; } .wrapper { display: grid; height: 100vh; grid-template-columns: 1fr 1fr; grid-template-rows: 80px 5fr 1fr; grid-template-areas: "header header" "sect sect" "foot foot"; } .wrapper .header { grid-area: header; } .wrapper main { grid-area: sect; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; } .wrapper main h2 { grid-column: 1/-1; } .wrapper main #sect1 { background-color: lightcyan; } .wrapper main #sect2 { background-color: lightpink; } .foot { grid-area: foot; background-color: rgb(255, 0, 0); }

 <div class="wrapper"> <header class="header"> <!--<img class="logo" src="imgs/logo.png" alt="logo"> --> <h1>LOGO</h1> <nav> <ul class="nav_links"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">About Us</a></li> <li><a href="#"><button class="nav_buttons">Login</button></a></li> </ul> </nav> </header> <main> <h2>TEXT HERE</h2> <div id="sect1"> <P>Section 1</P> </div> <div id="sect2"> <p>Section 2</p> </div> </main> <footer class="foot"> </footer> </div>

Answer 2

我会通过在主标签内使用一个单独的网格来解决这个问题，如下所示：

 body { font-family: 'Roboto', sans-serif; box-sizing: border-box; background-color: #ededed; margin: 0; padding: 0; } .wrapper { display: grid; height: 100vh; grid-template-columns: 1fr 1fr; grid-template-rows: 80px 5fr 1fr; grid-template-areas: "header header" "main main" "foot foot"; } .wrapper .header { grid-area: header; } .wrapper main { grid-area: main; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 1fr; grid-template-areas: "text text" "sect1 sect2" } .wrapper #sect1 { grid-area: sect1; background-color: lightcyan; } .wrapper #sect2 { grid-area: sect2; background-color: lightpink; } .foot { grid-area: foot; background-color: rgb(255, 0, 0); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="wrapper"> <header class="header"> <!--<img class="logo" src="imgs/logo.png" alt="logo"> --> <h1>LOGO</h1> <nav> <ul class="nav_links"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">About Us</a></li> <li><a href="#"><button class="nav_buttons">Login</button></a></li> </ul> </nav> </header> <main> <h2>TEXT HERE</h2> <div id="sect1"> <p>Section 1</p> </div> <div id="sect2"> <p>Section 2</p> </div> </main> <footer class="foot"> </footer> </div> </body> </html>

这也使您可以更好地控制主标签内的各个元素，并让您添加更多元素，而无需使用包装器中的导航栏和页脚结构。

如何在css网格上移动元素？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-11-09 22:38:52

解决方案2
0 2020-11-09 22:57:21

如何在css网格上移动元素？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-11-09 22:38:52

解决方案2 0 2020-11-09 22:57:21

解决方案1
1 已采纳 2020-11-09 22:38:52

解决方案2
0 2020-11-09 22:57:21