CSS格子グリッド内のグリッドのサイズ変更ボタン

私はfreecodecampを使い、電子計算機を作ろうとしていますが、まだまだ早い段階で、サイジングとレイアウトを正しいものにしようとしています。CSS格子グリッド内のグリッドのサイズ変更ボタン

私はボタンにCSSグリッドを使用していますが、ボタンのサイズを変更しようとすると問題が発生します。

私は電卓に表示される各ボタンの<button>要素を作成し、対応するCSSのグリッドエリアプロパティでグリッドに一致するように割り当てるJavaScript関数を持っています。

レイアウトや機能の仕事に完全に私はボタンが1列を占めるが、2行4列と行4と5

に位置し、ボタンを「等しい」のサイズを変更しようとしているとき、問題が来ますグリッドの

CSSのボタンのheightプロパティを変更すると、その特定のボタンが1列に1行だけに折りたたまれます。 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は：

ここでは、そうでない場合は、理にかなって

うまくいけば、であるcodepen

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

だから5つの明示的に定義された行があります。それらはすべて同じ高さを持ち、これはコンテナ内の空き領域の均等な分布です。

しかし、あなたはそれが自動的にあなたが定義したサイズの任意grid-areaをオーバーライドし、align-self: startを取得するグリッド項目にheightを設定します。スペックから

：グリッドアイテムが固有比又は関連寸法に固有のサイズを有する場合

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であると考えていました。将来の参照のために、この 'grid-template-rows：repeat（5,25px）;'それぞれの行と列スペースを宣言する 'grid-template-areas：'の方法を使用するのではなく、各クラスの小数点以下の宣言を使いたいと思った場合は、まだ動作します。.clearall {grid-column： 1/2;グリッド行：1/2;}？ –

わかりません。あまりにも仮説的。それを試してみてください。あなたが立ち往生した場合は、別の質問を投稿してください。 –

CSS格子グリッド内のグリッドのサイズ変更ボタン

答えて

関連する問題