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調整網格內的按鈕大小

回答

相關問題