Bootstrap Squared Columns for Tic-Tac-Toe Board?

Question

I am building a Tic-Tac-Toe interface, currently using HTML, CSS, and Bootstrap. I'm trying to get the board to be perfectly squared (1:1) but I'm getting nowhere.

The boxes have to be taller so they use up more space. I can playing with the height property using vw/vh units on the columns, but they won't keep the 1:1 ratio across all resolutions.

Tic Tac Toe

This other version has some "pads" on each side of the board and does the job but breaks on sizes smaller than tablets. Apart from that I lose too much space.

Tic Tac Toe with Pads

Now, here's the code for the Tic Tac Toe without pads:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tic Tac Toe</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-sm-2 ads"> "ads </div>
      <div class="col-12 col-sm-6 content">
        <div class="container-fluid tic-container">
          <div class="row tic-row">
            <div class="col-4 tic-box"> 1 </div>
            <div class="col-4 tic-box"> 2 </div>
            <div class="col-4 tic-box"> 3 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 4 </div>
            <div class="col-4 tic-box"> 5 </div>
            <div class="col-4 tic-box"> 6 </div>
          </div>
          <div class="row tic-row">
            <div class="col-4 tic-box"> 7 </div>
            <div class="col-4 tic-box"> 8 </div>
            <div class="col-4 tic-box"> 9 </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-2 tic-panel"> PANEL-THINGY<br>Score:<br>Foo bar: stuff<br> Reset game and all that blah </div>



      <div class="col-12 col-sm-2 ads"> ads </div>
    </div>
  </div>
</body>

</html>

.ads{
  text-align: center;
  margin: .4vw 0;
  background: #F4CC70;
  padding: .4vw;
}

.content{
  margin: .4vw 0;
  background: lightblue;
  padding: .4vw;
}
.tic-panel{
  border: solid 2px black;
  margin: .4vw 0;
  background: #66A5AD;
  padding: .4vw;
}

.tic-box{
  border: solid black 1px;
  font-size: 5vw;
  background: #6AB187;
  text-align: center;
  color: lavender;
}
.tic-box:hover{
  background: #20948B;
}

Anyways, I would appreciate some pointers to what I'm doing wrong or what I should do. I guess I'm doing something wrong, not taking full advantage of bootstrap.

Also, I would love if you could tell me if I doing something against the principles of bootstrap, such as using rows or col where I shouldn't.

This is actually a great use-case for CSS Grids. Are you familiar with that module? — TylerH, Aug 20 '17 at 00:28
@Tyler, I'm not! Are they supposed to be used in conjunction with Bootstrap? I will take a look at it! Thank you! — 10110, Aug 20 '17 at 00:39
CSS Grids is a vanilla CSS module that works entirely separate from Bootstrap. You can read the spec here: https://www.w3.org/TR/css-grid-1/ but it is pretty dry reading. Easier to digest places to read about it are here: https://css-tricks.com/snippets/css/complete-guide-grid/ and here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout — TylerH, Aug 20 '17 at 00:40
Essentially, if you have a grid layout you want to make, CSS Grids is designed specifically for that (hence the name). — TylerH, Aug 20 '17 at 00:41
@TylerH, I'm reading the csstricks.com guide and it looks like this replaces bootstrap? Correct? — 10110, Aug 20 '17 at 01:02
@TylerH, geez. I'm already in love with the grid! haha I'm using grid layout + media queries for the whole thing. Thank you sooo much. Bye bootstrap. — 10110, Aug 20 '17 at 02:29
Maybe take a look [at this thread](https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square) on how to create responsive squares. — Jeffrey Roosendaal, Oct 01 '18 at 14:52

score 0 · Answer 1 · edited Oct 01 '18 at 14:43

0

Add the following properties to the "tic-box" class:

.tic-box {
  width: 85px;
  height: 85px;
}

Then you will be able to delete the numbers and maintain the dimensions.

edited Oct 01 '18 at 14:43

Paul Roub

36,322
27
84
93

answered Oct 01 '18 at 14:41

Alfredo Rafael Habersham Pabon

36
1
4

Bootstrap Squared Columns for Tic-Tac-Toe Board?

1 Answers1