CSS Grid调整网格内的按钮大小

我正在通过freecodecamp并尝试制作电子计算器，但仍然很早，只是试图调整大小和布局。CSS Grid调整网格内的按钮大小

我正在使用CSS网格的按钮，但有一个问题，当我试图调整按钮的大小。

我有一个javascript函数，为每个按钮在要显示的计算器上创建一个<button>元素，然后在相应的CSS网格区域属性中指定匹配网格。

的布局和功能完美的工作，问题就来了，当我试图调整“等于”按钮，位于第4列和行4和5

按钮占用1列，但两行的网格。

只要我改变了css按钮的height属性，那个特定的按钮就会折叠成1列和1行。

希望这是有道理的，如果不是，这里是codepen：https://codepen.io/rorschach1234/pen/gxbbgg

和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>

的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; 
}

和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(); 
});

感谢您的帮助！

来源

2017-07-26 G. Ball.

在键盘每行的高度在网格容器定义：

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

所以有五个明确定义行。它们都具有相同的高度，这是容器中自由空间的平均分配。

但是，当您在网格项上设置height时，它会自动获取align-self: start，覆盖您定义的任何grid-area尺寸。

从规格：

6.2. Grid Item Sizing

如果电网项具有固有比率或在相关尺寸的本征尺寸，栅格项的尺寸作为用于align-self: start。

如果你想要的按钮是25像素高，并且grid-area工作，只是说在容器级别：

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

revised codepen

来源

2017-07-26 13:56:30

这工作完美，非常感谢你。我想我没有完全理解网格系统的尺寸是如何工作的。我一直在想它像一个分数/ 12的bootstrap。为了将来的参考，这个'grid-template-rows：repeat（5,25px）;'如果我决定不想使用'grid-template-areas：'声明每个行和列空间的方式，而是希望对每个类使用小数声明，则仍然有效：.clearall {grid-column： 1/2; grid-row：1/2;}？ –

不确定。有点太假设。测试一下。如果您遇到问题，请发布另一个问题 –

CSS Grid调整网格内的按钮大小

回答

相关问题