我试图弄清楚如何使用 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);
}
最佳答案
我认为您可以使用 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>
关于html - 如何移动 CSS 网格上的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64760052/