CSS Grid Größenanpassung Schaltflächen innerhalb Raster

Ich gehe durch Freecodecamp und versuchen, einen elektronischen Taschenrechner zu machen, immer noch sehr früh, nur versucht, die Größe und Layout korrekt zu bekommen.CSS Grid Größenanpassung Schaltflächen innerhalb Raster

Ich verwende ein CSS-Raster für die Schaltflächen, aber ein Problem, wenn ich versuche, die Größe der Schaltflächen zu ändern.

Ich habe eine JavaScript-Funktion, die ein <button> Element für jede Schaltfläche auf dem Rechner angezeigt wird und weist dann in der entsprechenden CSS-Rasterbereich-Eigenschaft, um das Raster zuzuordnen.

Das Layout und die Funktion perfekt funktioniert, kommt das Problem, wenn ich versuche, die „gleich“ Taste, befand Spalte 4 und Zeilen 4 und 5

Die Taste 1 Spalte in Anspruch nehmen, um die Größe, sondern zwei Reihen des Gitters.

Sobald ich die height Eigenschaft der Schaltflächen in CSS ändern, bricht diese bestimmte Schaltfläche in 1 Spalte und nur 1 Zeile.

Hoffentlich, die Sinn macht, wenn nicht, ist hier die codepen: https://codepen.io/rorschach1234/pen/gxbbgg

und die 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>

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

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

Schätzen Sie jede Hilfe, danke!

Quelle

2017-07-26 G. Ball.

Die Höhe jeder Zeile in der Tastatur ist im Raster Container definiert:

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

So gibt es fünf explizit Zeilen definiert. Sie alle haben die gleiche Höhe, was eine gleichmäßige Verteilung des Freiraums im Container darstellt.

Wenn Sie jedoch einen height auf einem Rasterelement setzen, wird automatisch align-self: start, wobei alle von Ihnen definierten grid-area Größenänderungen überschrieben werden.

Vom spec:

6.2. Grid Item Sizing

Wenn das Rasterelement ein intrinsisches Verhältnis oder eine Grenzgröße im relevanten Dimension hat, wird das Gitterpunkt wie für align-self: start bemessen.

Wenn Sie die Knöpfe wollen 25px groß sein, und grid-area, sagen, dass auf der Containerebene gerade zu arbeiten:

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

revised codepen

Quelle

2017-07-26 13:56:30

Das funktionierte perfekt, ich danke Ihnen sehr. Ich denke, ich habe nicht ganz verstanden, wie das Grid-System funktioniert. Ich habe darüber nachgedacht, wie Bootstrap, wo alles ein Bruch ist/12.Für zukünftige Referenz, würde dies 'Raster-Vorlage-Zeilen: wiederholen (5, 25px);' funktionieren immer noch, wenn ich entschied, dass ich nicht den 'grid-template-areas:' Weg zum Deklarieren jeder Zeile und jedem Spaltenraum verwenden wollte, sondern stattdessen die fraktionale Deklaration für jede Klasse verwenden wollte: .clearall {grid-column: 1/2; Gitterreihe: 1/2;}? –

Nicht sicher. Ein bisschen zu hypothetisch. Probieren Sie es aus. Stellen Sie eine andere Frage, wenn Sie nicht weiterkommen. –

CSS Grid Größenanpassung Schaltflächen innerhalb Raster

Antwort

Verwandte Themen