为什么我的HTML结构不能与CSS Grid布局一起使用？
[英]Why doesn't my HTML structure work with the CSS Grid layout?
问题描述
I am trying to understand how HTML structure affects the CSS Grid Layout Module spec. 
我试图了解HTML结构如何影响CSS网格布局模块规范。 I'm using Chrome Canary with experimental features enabled. 我正在使用启用了实验功能的Chrome Canary。
The attached code works as expected, but placing the nav and search inside the header tag just for semantics throws off the CSS grid placement. 附加的代码可以按预期工作，但是将导航和搜索仅放置在header标记内只是为了语义，会抛出CSS网格放置。
What am I missing to be able to use the CSS grid module and still keep my semantic header with nav, brand, and search wrapped in my header tag? 我缺少能够使用CSS网格模块并且仍将我的语义标头与nav，brand和search一起包裹在标头标记中的功能，该怎么办？
html { box-sizing: border-box; min-height: 2000px; } *, *:before, *:after { box-sizing: inherit; } .wrapper { width: 100%; display: grid; grid-template-columns: 20% auto 20%; grid-template-rows: 50px auto 50px; background-color: #fff; color: #444; } .mainheader { grid-column: 1 / span 3; grid-row: 1; background: #39444C; } .brand { height: 100%; margin: auto; color: #FFFFFF; background: #2E3840; } .search { grid-column: 3; grid-row: 1; } .navbar { grid-column: 2; grid-row: 1; background: #39444C; } ul { padding: 12px; margin: 0; } .navbar li { display: inline; padding: 10px; } .navbar li a { color: #9CA19A; text-decoration: none; font-size: 1.1rem; } .navbar a:hover { color: #00A5D5; } .sidenav { grid-column: 1; grid-row: 2; background: #F2F2F2; } .content { grid-column: 2; grid-row: 2; background: yellow; } .mainfooter { background: gray; grid-column: 1 / span 2; grid-row: 3; } .mainheader h1 { font-size: 2.8vw; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="wrapper"> <header class="mainheader"> <h1 class="brand">Simply Expense</h1> </header> <nav class="navbar"> <ul> <li><a href="#">Expenses</a> </li> <li><a href="#">Receipts</a> </li> <li><a href="#">Reports</a> </li> </ul> </nav> <div class="search"> <button>test</button> <input type="text"> </div> <aside class="sidenav"> Side nav </aside> <div class="content"> <button>test</button> <button>test</button> <button>test</button> </div> <footer class="mainfooter"> Footer </footer> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2015-06-01 00:56:34
Figured it out, if you place the brand, nav, and search inside the header they are no longer a direct descendant of the grid, so to place them correctly, you need to make another grid/subgrid when the subgrid keyword is available. 弄清楚了，如果您将品牌，导航和搜索放置在标题内，它们不再是网格的直接后代，因此要正确放置它们，当subgrid关键字可用时，您需要制作另一个网格/子网格。 For now, you can just use display:grid with same dimensions 现在，您可以只使用具有相同尺寸的display：grid
Given this HTML: 鉴于此HTML：
<div class="wrapper">
<div class="header">
<h1 class="logo">Simply Expense</h1>
<nav class="navbar">
<ul>
<li><a href="#">Expenses</a></li>
<li><a href="#">Receipts</a></li>
<li><a href="#">Reports</a></li>
</ul>
</nav>
<div class="search">
<button>test</button>
<input type="text">
</div>
</div>
</div>
the CSS would be: CSS将是：
.wrapper {
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 50px auto 50px;
}
.header {
grid-column: 1 /span 3;
grid-row: 1 ;
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 50px;
}
.logo {
grid-column: 1;
grid-row: 1;
margin: 0;
color: #FFFFFF;
background: #2E3840;
}
.search{
grid-column: 3;
grid-row: 1;
background: #2E3840;
}
Demo: 演示：
html { box-sizing: border-box; min-height: 2000px; } *, *:before, *:after { box-sizing: inherit; } body{ margin: 10px; padding: 0; } .header{ grid-column: 1 /span 3; grid-row: 1 ; display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 50px; } .wrapper { display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 50px auto 50px; } .logo { grid-column: 1; grid-row: 1 ; margin: 0; color: #FFFFFF; background: #2E3840; } .search{ grid-column: 3; grid-row: 1; background: #2E3840; } .navbar { grid-column: 2; grid-row: 1; background: #39444C; } .sidenav { grid-column: 1; grid-row: 2; background: #F2F2F2; } .content { grid-column: 2/span 2; grid-row: 2; background: yellow; } .mainfooter { background: gray; grid-column: 1 / span 3 ; grid-row: 3; } .mainheader h1 { font-size: 2.8vw; } ul { padding: 12px; margin: 0; } .navbar li { display: inline; padding: 10px; } .navbar li a { color: #9CA19A; text-decoration: none; font-size: 1.1rem; } .navbar a:hover { color: #00A5D5; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles.css"/> </head> <body> <div class="wrapper"> <div class="header"> <h1 class="logo">Simply Expense</h1> <nav class="navbar"> <ul> <li><a href="#">Expenses</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Reports</a></li> </ul> </nav> <div class="search"> <button>test</button> <input type="text"> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.