Why doesn't my HTML structure work with the CSS Grid layout?

Question

I am trying to understand how HTML structure affects the CSS Grid Layout Module spec. I'm using Chrome Canary with experimental features enabled.

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.

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?

 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>

Answer 1

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. For now, you can just use display:grid with same dimensions

Given this 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:

.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>

Why doesn't my HTML structure work with the CSS Grid layout?

Question

1 answers

solution1
1 ACCPTED 2015-06-01 00:56:34

Why doesn't my HTML structure work with the CSS Grid layout?

Question

1 answers

solution1 1 ACCPTED 2015-06-01 00:56:34

solution1
1 ACCPTED 2015-06-01 00:56:34