CSS Grid Layout by example

In this blog entry, I am going to be using the CSS Grid Layout system available as standard, through the W3C.
There are many blog and vlogs about this, so why bother?
I would like to deliver a simple an consistent approach to all CSS Grid Layout challenges.
Before we make our first grid, I'm going to put a couple of things in place:

• A CSS class called ".grid" thus : .grid { display: grid; grid-gap: 0.5em; } This enable us to create multiple grids in a row and differentiate between each element, thus: <div class="grid"></div> 
• A CSS class called ".grid-element" thus : .grid-element { background: #555; color: white; padding: 1em; margin: 0.5em 0; } This enable us to create multiple grid elements which can be clearly seen thus: <div class="grid-element">.grid-element</div> 

grid-1

Our first grid is the simplest. It containes only 1 column.

CSS

#grid-1 { grid-template-columns: auto; }

HTML

<div class="grid" id="grid-1">
    <div class="grid-element">.grid-element</div>
</div>

grid-2

Our next grid is also simple. It contains 2 columns of equal width, and 1 row.

CSS

#grid-2 { grid-template-columns: auto auto; }

HTML

<div class="grid" id="grid-2">
    <div class="grid-element">.grid-element</div>
    <div class="grid-element">.grid-element</div>
</div>

grid-3

Our next grid is also simple. It contains 2 columns, one of 66.6% width, and 1 row.

CSS

#grid-3 { grid-template-columns: 66.6% auto; }

HTML

<div class="grid" id="grid-3">
    <div class="grid-element">.grid-element</div>
    <div class="grid-element">.grid-element</div>
</div>

grid-4

Our next grid is slightly more complicated. It contains 2 columns, one of 66.6% width using the fraction (fr) unit. In the first column, there is 1 row. In the second column, there are 2 rows.

CSS

#grid-4 { grid-template-columns: 2fr 1fr; } #grid-4-second-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-4">
    <div class="grid-element">.grid-element</div>
    <div id="grid-4-second-container">
        <div class="grid-element">.grid-element</div>
        <div class="grid-element">.grid-element</div>
    </div>
</div>

grid-5

Our next grid is a variation on grid-4. It contains 2 columns, one of 66.6% width using the fraction (fr) unit. In the first column, there are 2 rows. In the second column, there is 1 row.

CSS

#grid-5 { grid-template-columns: 2fr 1fr; } #grid-5-first-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-5">
    <div id="grid-5-first-container">

        <div class="grid-element">.grid-element</div>

        <div class="grid-element">.grid-element</div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-6

Our next grid is a variation on grid-4. It contains 3 columns of equal width. In the first column, there is 1 row. In the second column, there are 2 row. In the third column there is 1 row.

CSS

#grid-6 { grid-template-columns: auto auto auto; } #grid-6-middle-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-6">
    <div class="grid-element">.grid-element</div>
    <div id="grid-6-middle-container">
        <div class="grid-element">.grid-element</div>
        <div class="grid-element">.grid-element</div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-7

Our next grid is slightly more complicated. It contains 3 columns of equal width. In the first column, there is 1 row. In the second column, there are 2 row. In the third column there is 1 row.

CSS

#grid-7 { grid-template-columns: 2fr 1fr; } #grid-7-column-1-container { display: inline-grid; grid-template-rows: auto auto; } #grid-7-row-2-container { display: inline-grid; grid-template-columns: auto auto; grid-gap: 0.5em; }

HTML

<div class="grid" id="grid-7">
    <div id="grid-7-column-1-container">
        <div class="grid-element">.grid-element</div>
        <div id="grid-7-row-2-container">
             <div class="grid-element">.grid-element</div>
            <div class="grid-element">.grid-element</div>
        </div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-8

Our next grid makes use of the "grid-template-areas" and "grid-area" properties. Here I use it to create a standard layout of Logo (picture), Header, Nav, Main content area, Sidebar and Footer.

CSS

#grid-8 { grid-template-columns: repeat(auto-fill, 1fr); grid-template-areas: "pic hd hd hd hd hd hd hd hd" "nv nv nv nv nv n-home n-about n-portfolio n-contact" "main main main main main main sd sd sd" "ft ft ft ft ft ft ft ft ft"; } picture { grid-area: pic; } header { grid-area: hd; } nav { grid-area: nv; } a#contact, a#about, a#home, a#portfolio { text-align: center; } a#home { grid-area: n-home; } a#about { grid-area: n-about; } a#portfolio { grid-area: n-portfolio; } a#contact { grid-area: n-contact; } main { grid-area: main; } aside { grid-area: sd; } footer { grid-area: ft; }

HTML

<div class="grid" id="grid-8">
    <picture class="grid-element">Picture</picture>
    <header class="grid-element">Header</header>
    <nav class="grid-element">Nav</nav>
    <a href="#" id="home" class="grid-element">Home</a>
    <a href="#" id="about" class="grid-element">About</a>
    <a href="#" id="contact" class="grid-element">Contact</a>
    <a href="#" id="portfolio" class="grid-element">Portfolio</a>
    <main class="grid-element">Main</main>
    <aside class="grid-element">Aside</aside>
    <footer class="grid-element">Footer</footer>
</div>

grid-9

Our next grid is a copy of grid-4. This time I'm applying a little fluidity using a media query.

CSS

#grid-9 { grid-template-columns: 2fr 1fr; } #grid-9-second-container { grid-template-rows: auto auto; } @media (min-width: 768px) and (max-width: 1024px) { #grid-9 { grid-template-columns: auto; } }

HTML

<div class="grid" id="grid-9">
    <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
    </div>
    <div id="grid-4-second-container">
        <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
        </div>
        <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
        </div>
    </div>
</div>