CODEWITHSUNDEEP
javascripthtmlcsscss-grid
G. Ball.
G. Ball.

Reputation: 169

CSS Grid resizing buttons within grid

I'm going through freecodecamp and trying to make an electronic calculator, still very early on, just trying to get the sizing and layout correct.

I'm using a CSS grid for the buttons but having an issue when I'm trying to resize the buttons.

I have a javascript function that creates a <button> element for each button to be displayed on the calculator and then assigns in the corresponding css grid-area property to match the grid.

The layout and function work perfectly, the problem comes when I'm trying to resize the "equals" button, located column 4 and rows 4 and 5.

The button takes up 1 column, but 2 rows of the grid.

As soon as I change the height property of the buttons in css, that particular button collapses into 1 column and just 1 row.

Hopefully that makes sense, if not, here is the codepen: https://codepen.io/rorschach1234/pen/gxbbgg

and the html: 

<head>
 <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container">
    <h2 class="top">Electronic Calculator</h2>
    <div class="display">
      <h2>display</h2>
    </div>
    <div class="buttons">
    </div>  
  </div>
</body>

the CSS: 

$calc-font: 'Orbitron';

.container {
  margin: 5% 33%;
  background: grey;
}

.top { 
  font-family: $calc-font;
  text-align: center;
  padding-top: 5px;
}

.display {
  margin: 3% 5%;
  padding-bottom: 3%;
  background: white;
  text-align: right;
  font-family: $calc-font;
}

.buttons {
  margin: 0 5%;
  padding-bottom: 3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas: 
    "clearall clearD divide multiply"
    "seven eight nine minus"
    "four five six add"
    "one two three equals"
    "zero zero period equals";    
}

button {
  height: 25px;
}

and the javascript: 

var btnClasses = ["clearall", "clearD", "divide", "multiply", "seven", "eight", "nine", "minus", "four", "five", "six", "add", "one", "two", "three", "equals", "zero", "period"];

var buttons = ["AC", "CE", "&divide;", "&times;", 7, 8, 9, "&minus;", 4, 5, 6, "+", 1, 2, 3, "=", 0, "."];

/*function creates a button and then adds the corresponding grid-area to match the grid-template-areas layout in CSS*/

function createButtons() {
  for (var i = 0; i<btnClasses.length; i++) {
    $(".buttons").append("<button class=\"" + btnClasses[i] + "\">" + buttons[i] + "</button>");
    $("." + btnClasses[i]).css("grid-area", btnClasses[i]);
    $("." + btnClasses[i]).css("font-family", "Orbiton");                          
  };
};

$(document).ready(function() {
  createButtons();
});

Appreciate any help, thanks!

Upvotes: 2

Views: 6672

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

The height of each row in your keypad is defined in the grid container:

.buttons {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
}

So there are five explicitly defined rows. They all have the same height, which is an equal distribution of free space in the container.

But when you set a height on a grid item it automatically gets align-self: start, overriding any grid-area sizing you've defined.

From the spec:

6.2. Grid Item Sizing

If the grid item has an intrinsic ratio or an intrinsic size in the relevant dimension, the grid item is sized as for align-self: start.

If you want the buttons to be 25px tall, and grid-area to work, just say that at the container level:

.buttons {
    display: grid;
    grid-template-rows: repeat(5, 25px);
}

revised codepen

Upvotes: 2

Related Questions