4_projek.css

/* css reset */
* {
    box-sizing: border-box;
}

body {
    background-color: #FCF8F3;
}

/* --------------------------------------- */

/* body-kal adalah parent dari display, operator, number*/
.body-kalc {
    width: 60%;
    display: grid;
    grid-template-areas:
    'display display display'
    'number number operator'
    'number number operator'
    'number number operator'
    ;
}


.display {
    grid-area: display;
    border: 3px solid black;
    margin: 5px 5px;
}

.operator {
    display: grid;
    grid-area: operator;
    margin: 5px 5px;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

/* layout number */
.number {
    grid-area: number;
    display: grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr 2fr 1fr;
}

button {
    width: 60px;
    align-content: center;
    align-items: center;
    margin: 1px;

}
/* --------------------------------------  */
/* pake grid  */