Creating a Game Board The game that I've decided to create is one of my favorites. It's Jeopardy, it's been in existence since 1964 and it's still going strong. What you're seeing here is an online developer. It's called CodePen IO. And what you're allowed to do here is test out some of the code that you're going to be working with. What I've done is created a small HTML document that wants to print out four columns. And for this design, and for this course, we're going to delve deep into the abilities of the grid class. And what we're going to be able to do is put together a game board that is responsive in design, and also attractive to the eyes. So as you can see, on the left hand side of the screen in my HTML document, I've got a simple HTML with one division called class, I've got one section of the program that is divided into four columns, and I have two classes there, one is called the grid class, and the other is called the column class and we'll look at how that is styled in CSS. If you look in the middle, that is the CSS code window, we've got some basic stuff for our body and then we define what the grid class is. If you look carefully in the red circle, you'll see that I'm creating something called a grid template column and I want four columns, each to take up 25% of the screen. The problem is when I want to separate those columns with something called a grid gap. And as you can see, on line 12, I'm setting the grid gap at 10 pixels. And that gives me a space in between each of the columns. What happens with grid template columns and the 25% is that it does not include the gap between columns and correspondingly, it creates a horizontal scroll bar, something that we never wanna see. If you look on the right side in the window that's normally reserved for JavaScript in this particular screen, we don't have any, using the 25% gives us a horizontal scroll bar at the bottom of column four. Instead of four and 25%, I change the way the grid template columns are set up. I changed the 25% to say that I would like to use a fraction of the remaining space. And what we're going to do is we're gonna learn exactly how this works. The idea is that it will calculate how much remaining space is left and adjust the column width instead of 25%, it'll knock it down to 22 or 23% to accommodate the width of the gaps. And this fraction, as you can see, 1fr will allow me to get the entire width of four columns and include the gaps in the width of the page. Let's see how that looks when we design it on a game board. In this case, our categories are going to be all about CSS, and the stuff that we're going to be working on. We've got dollar values similar to the way that Jeopardy has them. And we'll be coding this game to make it work as Jeopardy does with a little twist. In order to get that game board to work, we're going to want to create and use the box-sizing property. What we wanna do is create a height and width that we're going to assign to this box and handle whatever's inside the box. Borders and padding are added to the width to give us the size the boxes rendered on the screen and we have to adjust that value. Again, as I said, if we have four boxes 25% each, any right or left padding, it won't fit on one line within the constraint of that box container. So what we do is we change it, instead of using the content-box, which is the default version, we want to change it to border-box. And that allows the browser to count from borders and padding and gap width and anything else, and it will automatically shrink the size of the document so that there is no horizontal scrolling. Using border-box makes it easier with any element that eliminates the problems with laying out all of our content. Relative and absolute positioning allows those values to be relative to the content and independent to changes in border and padding. So we're always going to get equal columns no matter what we do. Let's look at the code that generates this content-box and border-box. The first one, this larger box, has our box-sizing property to set to content-box. The box is going to be 160 pixels wide, 80 pixels high, it's going to have padding of 20 pixels, which is going to move the words content-box 20 pixels away from the border, and it's going to have an eight pixel border. If you do some math, the 160 pixels for the box, plus the two sets of padding, left and right plus the two sets of borders, left and right will really give you a 216 pixel wide box. And the same thing goes with the height. Instead of saying content-box, we create a class called border-box. That padding is subtracted from the entire box width and we get a much smaller box. Why the big deal? Well, when users are using different types of devices to access the pages, we need to save as much screen space as possible and using border-box will help us do that.
