grid 布局的六个麻将:未完待续
前言
上次用 flex 布局写了 9 个麻将,一直想尝试用 grid 布局来写。今天终于有兴致试试,翻了一圈资料,麻了,先写几个简单的吧。
基础布局
<body>
<!-- 一饼 -->
<div class="container container1">
<div class="item"></div>
</div>
<!-- 二饼 -->
<div class="container container2">
<div class="item"></div>
<div class="item"></div>
</div>
<!-- 四饼 -->
<div class="container container4">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- 六饼 -->
<div class="container container6">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- 八饼 -->
<div class="container container8">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- 九饼 -->
<div class="container container9">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
公共样式
<style>
/* 公共样式 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: grid;
float: left;
width: 80px;
height: 100px;
margin: 20px 20px;
border-radius: 5px;
background-color: #ccc;
}
.item {
background-color: red;
border-radius: 50%;
}
</style>
初始效果
哈哈,挤一坨了,像弹簧,还挺有趣!
一饼
/* 一饼 */
.container1 {
grid-template-columns: 50px;
padding: 25px 15px;
}
二饼
/* 二饼 */
.container2 {
grid-template-columns: 30px;
grid-gap: 10px;
padding: 15px 25px;
}
四饼
/* 四饼 */
.container4 {
grid-template-columns: 25px 25px;
grid-gap: 20px;
padding: 15px 5px;
}
六饼
/* 六饼 */
.container6 {
grid-template-columns: 20px 20px;
grid-gap: 10px 20px;
padding: 10px;
}
八饼
/* 八饼 */
.container8 {
grid-template-columns: 20px 20px;
grid-gap: 5px 20px;
padding: 2.5px 10px;
}
九饼
/* 九饼 */
/* 紧凑一些 */
/* .container9 {
grid-template-columns:20px 20px 20px;
grid-gap: 10px 0px;
padding: 10px;
} */
/* 松弛一些 */
.container9 {
grid-template-columns:20px 20px 20px;
grid-gap: 10px 5px;
padding: 10px 5px;
}
转载自:https://juejin.cn/post/7086859813770133535