Small steps with CSS Grid Layout

One of my objectives with this site is to do more with CSS Grid Layout. I’ve made a start with that by recoding the site header section as follows.

My header is pretty simple. It contains a logo area and a navigation element that has an unordered list.

<header>
    <div class="logo">
            <a href="/">Clive Walker's Site</a>
      </div>
    <nav>
        <ul>
         <li><a href="/">Home</a></li>
         <li class="ancestor"><a href="/blog">Blog</a></li>
        </ul>
     </nav>
</header> 

At this stage, I want to separate the two areas so that they are side-by-side. Normally, I’d float each item left and right, assign a width, and add a clear fix. In this case though, I can use Grid Layout in my CSS as follows:

header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em
}

My rules are assigned to the containing element, which is <header>, and this controls the layout inside it.

I use display: grid to create the grid and grid-template-columns to create two columns, each taking up one fraction unit (1fr). I’ve assigned a grid-gap of 3em although that’s not strictly necessary at the moment.

And that’s it! No clearing of floats needed. Just a few lines of grid layout CSS.

• I’m using other rules for text-align:center and display: inline-block for my <ul> list items.

Admittedly, this is a very simple example and you might consider adding a fallback for browsers that don’t support Grid Layout. I may add that later although with browser support increasing every month, I probably won’t do it on this site.

I realise that the above only targets the header section. My next step will be to use grid layout to define more of the structure of my site, including content and footer areas. Before I do that though, I need to think more about the site’s content.