CSS Grid 布局电脑数字小键盘
布局样式:
<body>
<div class="one a">
<div>Num</div>
<div>7</div>
<div>4</div>
<div>1</div>
<div>></div>
</div>
<div class="two a">
<div>/</div>
<div>8</div>
<div>5</div>
<div>2</div>
<div>0</div>
</div>
<div class="three a">
<div>*</div>
<div>9</div>
<div>6</div>
<div>3</div>
<div>.</div>
</div>
<div class="four b">
<div>-</div>
<div>+</div>
<div>enter</div>
</div>
</body>
style格式:
<style>
.one,
.two,
.three {
display: inline-grid;
grid-template-columns: 50px;
grid-template-rows: 50px 50px 50px 50px 50px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.four {
display: inline-grid;
grid-template-columns: 50px;
grid-template-rows: 50px 110px 110px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
.a > div {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.b div {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>