Customizing layout to make your projects pop

In this section, we’ll be introducing a tool grid layout in order to have some more control over how our site looks and the shape of it.

Our basic plan is still pretty simple, though. Really the simplest thing we could make: we want our title up top and then the rest of the site laid out into two columns, so that we have our projects to the left and our dscriptions and links to the right.

To start, we’re going to introduce a new bit of HTML: the div tag.

On its own, div doesn’t do anything. Its only purpose is to group other parts of the page together for styling and code.

So now we’re going tot take everything that isn’t our title and put it in between a start and an end div so the code will look like

<div>
  
      <p>My name is Clarissa Littler, or left_adjoint in the weird small places of the internet, and I'm an artist, programmer, and teacher based in Portland, OR.</p>
    
      <p>I create poetry, generative art, algorithmic music, and essays on the relationship between people and technology. Below I link to some of the projects I've worked on!</p>

...
    
</div>

The next thing we need to do is add a new attribute to this div. This attribute is going to be used to give it a kind of name we can use to refer to this div specifically. The reason is that there can, and probably will, be more than just one div in the entirety of the site. We don’t want to turn every one of them into a grid, just this one.

So we’ll change our div so it looks like

<div class="content">
...
</div>

with the ellipses representing all the other code in-between.

We’re ready to start changing our CSS and we can change this specific div by adding the following code to our file

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

What we’re doing here is we’re telling this particular div that it, and everything inside it, should be displayed as a grid. Then we’re saying that there are two columns in the grid, each are equal in size. The reason for the 1fr 1fr is that the fr stands for fraction and this is how you define the relative size of the columns to each other.

For example, if I wanted three columns where the middle one is twice as big as the other two I’d write 1fr 2fr 1fr instead.

If we look at our site, though, it might be a little surprising what we see:

We also have our h2 headings each showing up in columns rather than as separate dividers between sections.

The first problem is solved if we put a div around those two paragraphs in the bio, so they’re treated as just one object for the purpose of the grid