我开始学习 CSS 网格。但是,如果我有 12 行和 12 列,我会尝试研究如何选择 2 行并将其跨越到最后。在那几行我将放置一个导航链接。
body,
html {
padding: 0;
margin: 0;
background-color: #5DADE2;
height: 100%;
}
.mainbox {
display: grid;
margin: 10px 0;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
}
header {
grid-column: 1 / -1;
background-color: #fff;
}
<div class="mainbox">
<header>
<nav><a href="#">Home</a></nav>
</header>
</div>
最佳答案
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
height: 100vh;
margin: 10px 0;
}
header {
grid-row: 1 / 3; /* new; span across rows 1 & 2 */
grid-column: 1 / -1;
background-color: #fff;
}
body {
padding: 0;
margin: 0;
background-color: #5DADE2;
}
<div class="mainbox">
<header>
<nav><a href="#">Home</a></nav>
</header>
</div>
关于html - 在 CSS 网格中选择行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52801726/