爲什麼我的HTML結構不能使用CSS網格佈局？

我想了解HTML結構如何影響CSS Grid Layout Module規範。我正在使用啓用了實驗性功能的Chrome Canary。爲什麼我的HTML結構不能使用CSS網格佈局？

附加的代碼按預期工作，但將nav和search僅放置在標記標記中用於語義拋出CSS網格放置。

我錯過了什麼能夠使用CSS網格模塊，並仍然保持我的語義標題包含導航，品牌和搜索包裹在我的標題標記？

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>

來源

2015-05-30 dan

想通了，如果你把這個品牌，導航，他們不再是網格的嫡系頭內搜索，所以正確地放置這些，你需要當關鍵字subgrid可用時，創建另一個網格/子網格。現在，你可以使用display：電網與相同尺寸

鑑於此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>

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

演示：

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>

來源

2015-06-01 00:56:34 dan

爲什麼我的HTML結構不能使用CSS網格佈局？

回答

相關問題