使用 grid-template-areas 定义每个区块,grid-item再使用grid-area决定元素的位置。
<div class="wrapper">
<div class="purple">purple</div>
<div class="green" >green</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
</div>
.wrapper {
display: grid;
grid-template-areas :
"purple purple green green green"
"purple purple yellow yellow yellow"
"red red red red red";
}
.purple
{
border:1px solid black;
grid-area:purple;
background-color: purple;
}
.green
{
border:1px solid black;
grid-area:green;
background-color: green;
}
.yellow
{
border:1px solid black;
grid-area:yellow;
background-color: yellow;
}
.red
{
border:1px solid black;
grid-area:red;
background-color: red;
}
使该区域无效可以用「.」
grid-template-areas :
"purple purple green green ."
"purple purple yellow yellow yellow"
"red red red red red";
可以在搭配上昨天讲的grid-template-columns/rows 控制宽高。
.wrapper {
display: grid;
grid-template-columns : 50px 60px 100px 100px 100px;
grid-template-rows : 30px 60px 90px;
grid-template-areas :
"purple purple green green ."
"purple purple yellow yellow yellow"
"red red red red red";
}
每天赛跑 铁人赛要迈入下半场了,回顾前半场...,每天回家吃完饭剩下 3-4 小时可以来写稿 偏偏假...
我的资料结构 . ├── App.js // App root component,the star...
填满色彩 在点击画布时,使用 fillStyle 先填上颜色,再覆盖整个画布 /** * 滑鼠点下画...
GitHub Repo https://github.com/b2etw/Spring-Kotlin...
巴菲特有句名言:「规则一,永远不要输钱。规则二:别忘记规则一。」 https://www.youtu...