Let’s start off with a simple HTML box, a div tag with a background color.

<div style="background: blue">I am a box.</div>

Next let’s add some context to our box content with a header and <p> tag.

Next let’s move our CSS out of the inline form we have now and replace it with a class name. Note that we also removed margin from the body in this example.

We’re going to start styling our box now, beginning with some padding to prevent our content from sitting right at the edge of the box.

A few font changes are added in this example as well including setting the font-family to sans-serif and making the color white.

Isn’t this great, just a few lines of CSS and we’ve already got a reasonably styled content box. Let’s now step it up a notch.

We add an image using the img tag, and to prevent this image from being absolutely massive we set use max-width CSS on the img selector.

Now what if we want our image positioned either to left or the right of our text content, which is a very common layout technique? We could use CSS floats, but in most layouts today we avoid them because of a range of inconsistencies that can result from floating elements. Instead we’re going to use a CSS grid.

In order to introduce CSS grids checkout this fairly strange layout below. Notice we’ve added the “display” property to the .box element. Then on the next line we define a grid using the “grid-template-columns” property. As you can see with the HTML structure we have this lines up our 3 content elements, the header, the paragraph and the image are now all aligned on the same row.

What we need to do now is adjust our container div. Instead of a single .box div, we need to add 2 nested divs inside this which will then become the columns in the grid row.

Now that we’ve demonstrated the use of the CSS grid and templates we’re going to go a step further and build a 2-column layout with multiple items, like we often see in a blog post archive or a list of products.

In the example below we leave our item HTML and CSS the same. We’re now duplicating our .box so we have 2 items. Those 2 items are enclosed in a grid structure. We’re going to call this our LIST from now on to differentiate the outer list grid from the inner item grid.

Depending on your screen size you may notice some issues in that last example when the width is constrained. We haven’t looked yet at what we’ll need to do for a responsive layout. Before we go there we’re going to continue fleshing out the grid handling. What do we need to change to make a 3-up grid with equal columns? The answer is to change the grid-template-columns property adding a 3rd parameter to make each column 33.333% width. We also set up a second row in this example.

The 2 columns we have in the list items no longer makes sense in a 3-column display so we’re going to simplify that to a common 1-column layout with the image above the text.

We now have a fairly common 3-up grid. Let’s learn a new property we can use with our CSS grids, called “grid-gap”. This creates a uniform gap between our grid items, which is really nice because it so much more compact than using a combination of margins to achieve a similar gutter effect.

In this next few examples we’re going to begin adding links to our design. In most use cases this type of grid is going to be a list of content items and we’re going to want to link in various ways to the content. It’s worth taking the links into account and think about this early in the process when you can, but in this case we will progressively add a wrapping link around our content box and see what happens.

In the last example you may noticed the text decoration (underline) was shown on all the links. Unless you have some CSS to prevent it this is the default, so let’s add some CSS styles for the .link a{} selector and the hover as well, to prevent that default text decoration.

Another common requirement in this type of grid layout would be to have a secondary link or links that go somewhere other than the main wrapping link. Now we can’t just put another <a> tag inside the existing link that wraps our entire item. There are a few solutions to this, but the simplest one is just to put a link adjacent to our link item and use absolute positioning to move it to the location we want. This won’t be the ideal solution in all cases, but it’s a good starting point for solving this problem.

Today we will practice making boxes on the web. We’ll be using the <div> tag. In HTML5 the div tag is the most common and basic container element.

<div>This is a box!</div>