A Beginners Guide to CSS Grid

#beginners #css #tutorial

CSS positioning has been the beast that many developers seem reluctant to conquer. It can be finnicky, particular, and frustrating to say the least. When do I use position: absolute or position: relative? Why are my elements not stacking on top of each other?

It's important that front-end developers know the uses of all of these different properties, and how to use them. However, there's another way to position your elements exactly how you want them:

CSS GRID

CSS grid came out in April of 2007, and helped tackle the struggles of positioning that came with Flexbox at the time. Where Flexbox handles one dimension (rows OR columns) really well, grid is generally better for working with two dimensions. Here's a little info graphic to help you out:

This is to show you the main axis on your page. With a flexbox design, you need to know which axis your element will be going before you start, as it can only work on one dimension

So let's get into some actual CSS Grid.

Here is the base code I'm using for the example, in case you want to test things out for yourself:

/* CSS */

.base-box {
  font-size: 1.5rem;
  width: auto;
  height: 125px;
  margin: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  background-color: rgb(241, 194, 194);
}
#box-1 {
  background-color: rgb(75, 79, 105);
}

#box-2 {
  background-color: rgb(197, 40, 119);
}

#box-3 {
  background-color: rgb(54, 202, 228);
}

#box-4 {
  background-color: rgb(36, 233, 52);
}

#box-5 {
  background-color: rgb(238, 179, 90);
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id='container'>
      <div id='box-1' class='base-box'>Div 1</div>
      <div id='box-2' class='base-box'>Div 2</div>
      <div id='box-3' class='base-box'>Div 3</div>
      <div id='box-4' class='base-box'>Div 4</div>
      <div id='box-5' class='base-box'>Div 5</div>
    </div>
</body>
</html>

After opening index.html in your browser, you should see the page like this:

Now lets change the display of our container element to be display: grid;. At first, you shouldn't see much change besides a little bit of extra spacing. Where the real magic comes in is when you create your template. Try putting this code into the container element, and then open your browser dev-tools to check it out:

grid-template-columns: repeat(5, 250px);
grid-template-rows: 150px;

note: repeat() allows for us to create multiple copies of the same grid cell at a time.

If you hover over the container element using your browser dev-tools, you should see what some dotted lines between each of our boxes. These are the grid lines. Those are what were created with our grid-template-columns code above, and now each of our boxes has it's own cell.

Fractional Units

We can improve upon this, though. As this stands now, there's a little bit of extra space on the end, and it's not very responsive to different screen sizes. But we can take care of that! Grid has a specific unit of measurement called the fr. This stands for "fractional unit," and is an amazing way to allocate space to our child elements while also taking screen size and screen breakpoints into account.

Let's change our column width of 250px to

grid-template-columns: repeat(5, 1fr)

Here, we see that all of grid containers take up an equal fraction of the container. We can mix and match these sizes to get whatever kind of layout we want. Try:

/* grid-template-columns: repeat(5, 1fr) */
grid-template-columns: 2fr 1fr 3fr;
grid-template-rows: 1fr 1fr;

Grid Shorthand

Alright, so there's one more thing to note, and that is the grid shorthand. This lets us decide the space our children element takes up on the grid based on a start point/end point syntax.

We remember from earlier that our grid has grid-lines that break up our columns and rows. Beginning from the very start of our container, the lines are numbered from left to right for columns starting from the number 1, and from top to bottom for rows. In grid shorthand, we use those line numbers as a way to dictate when we start and stop our container on the grid.

Image Source

Our orange box seems to have a lot of leftover space at the end of the container. Let's fix that with grid-shorthand. We want this box to start at the *second grid-line, and take up the rest of the remaining space.

#box-5 {
  background-color: rgb(238, 179, 90);
  grid-column: 2/4;
}

CSS grid is a fantastic way to utilize the space of your page in a responsive, creative, and simple way. Below are some resources to take a deeper dive into CSS grid.