We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <header>Header</header> <aside>Aside 1</aside> <section>Section</section> <aside>Aside 2</aside> <footer>Footer</footer> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /> </div> </body> </html>
.container { display: grid; grid-gap: 5px; grid-template-areas: "header" "section" "aside-1" "aside-2" "footer"; } @media (min- 700px) { .container { grid-template-areas: "header header header" "aside-1 section aside-2" "footer footer footer"; } } /* All Grid Items */ .container > * { background-color: mediumseagreen; font-size: 80px; } header { grid-area: header; } aside:nth-of-type(1) { grid-area: aside-1; } section { grid-area: section; } aside:nth-of-type(2) { grid-area: aside-2; } footer { grid-area: footer; }