From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 6.6: Grid templates
It is common to create a website by first sketching out a rough layout of that design. A simple website
might look something like this:
This could then be broken into a rough grid like so:
If we were to assign a short code for each section of the site we may have a list like the following:
bg – logo bug
hd – main heading
sb – Sidebar
nv – menu bar (NaVigation)
ar – article (content)
ft – page footer with copyright
Combining the grid with the short codes we would have this:
bg
hd
hd
hd
sb
sb
nv
nv
nv
nv
sb
sb
ar
ar
ar
ar
sb
sb
ft
ft
ft
ft
ft
ft
We can then use this table to put together a simple template for our grid. This makes the layout of the
separate divisions a task that is handled by the grid layout. We just need to add the appropriate
division tags that make up the parts of the page. This requires that we make sure the divs being added
have the appropriate information in them so CSS knows where to place the items.
To set up the grid, we would use the following CSS:
.gridPage {
display: grid;
grid-template:
"bg hd hd hd sb sb"
"nv nv nv nv sb sb"
"ar ar ar ar sb sb"
"ft ft ft ft ft ft";
grid-template-columns: 5em repeat(5, 1fr);
}
Notice that we are using grid-template-columns to also control the size of the columns. This is only needed if you have some elements that need to be a specific size. The template should be specified before the columns are specified.
For this section’s demo, we are taking advantage of semantic tags, which work great for this type of page. We will cover these tags in Chapter 8 but the demo does explain it’s use of these tags in the article.
Each element either needs a tag that can be altered uniquely to fit into place or a class that lets you apply the grid-area information to the div you are placing. The grid-area attribute simply tells the section which short code we used in the template so the grid knows where to place them. This has the additional advantage that you don’t need to specify the divs in a particular order as the grid-area lets grid know where to put things. Here is the CSS for a couple of the page elements:
Even though we are not covering this topic until chapter 8, I have decided that this demo would be using some of
the semantic web tags. These are simply tags that are div tags but with names that are related to the type of
content that is supposed to go in them. For example, this main area of the page is using a <article> tag as
it represents an article portion of a web page.
The sidebar beside this article, would use something called an <aside> tag as it is material that goes along
with the main article. Note that I did not redefine the aside tag but instead created a more specific sidebar
class which is used in the aside.
The header for this page uses a modified version of the <header> tag. If you look at the source code, you
will notice that I accidentally placed the header after this section, yet when the page is generated it is in the
correct location. This is because the grid-area attribute is used to place the item in the appropriate
area of the grid.
The menu bar uses the <nav> tag which is short for navigation. Sadly, the links are not real links but the
point is that you can easily define an area for your navigation menus.
