CSS Grid resizing buttons within grid

Question

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!

Michael Benjamin · Accepted Answer · 2017-07-26 14:16:45Z

2

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

edited Jul 26, 2017 at 14:16

answered Jul 26, 2017 at 13:56

Michael Benjamin

376k110 gold badges616 silver badges738 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

G. Ball. Over a year ago

That worked perfect, thank you very much. I guess I didn't fully understand how the grid system sizing worked. I was thinking of it like bootstrap where everything is a fraction / 12. For future reference, would this 'grid-template-rows: repeat(5, 25px);' still work if I decided I didn't want to use the 'grid-template-areas:' way of declaring each row and column space, but instead wanted to use the fractional declaration for each class like: .clearall {grid-column: 1/2; grid-row: 1/2;} ?

Michael Benjamin Over a year ago

Not sure. A bit too hypothetical. Test it out. Post another question if you get stuck.

Collectives™ on Stack Overflow

CSS Grid resizing buttons within grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related