Well, after a lapse of 8 months, I finally have a new project up and running at Kobayashi Coding – an example of using CSS Grid layout. (Click on the “Projects” dropdown and choose “Week 7.”)

The result is similar to what Bootstrap and other grid frameworks provide, but without the additional Javascript and CSS files. The example on my project site is basically taken directly from the Mozilla Developer Network tutorial titled “Introduction to CSS Grid Layout” with very minor changes to the HTML and CSS. I found this particular tutorial through a Facebook post on the Firefox page – https://www.facebook.com/Firefox/videos/4910150590250/.

While this has increased my understanding of both CSS and grid layouts, I did have one problem that manifested itself in a couple of ways. You’ll notice that there are no spaces around the two links in the “Header” panel. This is so even though there are spaces around them in the HTML for the page. This same problem also prevented me from arranging the text in the “Header” panel in the way I really wanted – with the word “Header” centered on one line, and the rest of the text centered below the first on a second line. I could get the two lines by using the CSS property “display: block” in the definition for the “.header” class, but I could never get it centered. Also, using a <br /> between the word “Header” and the opening parenthesis before the word “Note” did not yield two separate lines. Finally, putting paragraph tags (<p></p>) around the two desired lines also did not render the correct result. Sigh.

Update 2017-12-05: After watching the YouTube video of Morten Rand-Hendriksen’s excellent talk, “CSS Grid Changes EVERYTHING”, I made a few changes and now the result is what I wanted. I removed the “display: flex;” from the CSS for the .item class, and also removed the “display: block:” from the CSS for the “a” tags. Finally, I added a “margin: 5px;” to the CSS for the “a” tags, which put the desired spaces around them.

Finally, the page works fine in both Firefox and Chrome, but does not seem to work in any version of Internet Explorer or Edge. Hmmm…