acwong00 / blog Goto Github PK
View Code? Open in Web Editor NEWMy blog.
My blog.
最近看项目的代码,有一个群聊头像拼接的需求,会获取到群聊成员的四个或者三个头像进行拼接(如下图,四头像拼接和三头像拼接),目前是使用 position: absolut
为各个头像进行绝对定位,感觉这样的解决方案不够优雅,由于项目是基于 electron 因此不用考虑兼容性问题,所以可以使用 Grid 布局的解决方案。
与 flex 布局为一维布局不同,grid 为二维的布局属性,所以非常适合完成头像拼接这种二维布局的样式,首先是初始的 HTML 结构。
<div class="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: yellow;">2</div>
<div class="item" style="background-color: blue;">3</div>
<div class="item" style="background-color: green;">4</div>
</div>
容器设置为 grid 布局,设置行和列。
.container {
display: grid;
width: 180px;
height: 180px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-radius: 50%;
overflow: hidden;
}
grid-template-rows
和 grid-template-columns
分别设置布局当中的行和列,可以看到现在是一个 2x2 的两行两列结构,设置容器固定宽高为 180x180,用 fr
单位就相当于 flex 布局当中元素占满剩余的区域,当前将每一列和行的宽度都设置为 1fr
就相当于元素平分了宽度和高度。
可以看到原本绝对定位布局需要针对下方每一个元素设置定位数值,而使用 grid 布局就只需要写数行代码。
<div class="container">
<div class="item" style="background-color: red;">1</div>
<div class="item" style="background-color: yellow;">2</div>
<div class="item" style="background-color: blue;">3</div>
</div>
.container {
display: grid;
width: 180px;
height: 180px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
border-radius: 50%;
overflow: hidden;
}
由于三号头像需要在拼接的右侧,因此需要改变 grid-auto-flow
属性,这个属性的默认值为 row
意思是顺序的放置为先行后列,而改为 column
之后就改变为先列后行。
然后针对三号头像进行 grid-row
属性设置。
.container .item:last-child {
grid-row: 1 / 3;
}
要解释 grid-row
这个属性,首先要理解网格线这个概念,例如现在头像是一个「田」字型的布局,可以看作是横竖各三条网格线将一个平面分割成四分。而 grid-row: 1 / 3
这种写法也可以拆分为:
.container .item:last-child {
grid-row-start: 1;
grid-row-end: 3;
}
意思就是该元素上边边框处于第一条网格线,下边边框处于第三条网格线,因此就可以完成需求的布局。
后续如果遇到产品改需求,需要改变头像显示的顺序也非常简单,除了 grid-auto-flow
可以按照行列改变头像显示的顺序以外,还可以手动指定头像的位置,比如说要把1号头像放到右下角的位置。
.container {
display: grid;
width: 180px;
height: 180px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border-radius: 50%;
overflow: hidden;
grid-template-areas: 'a b'
'c d';
}
.container .item:first-child {
grid-area: d;
}
为 container 添加 grid-template-areas
手动定义每一个区块的名称,然后在对应的子元素添加 grid-area
属性,指定它所在的区块。
总的来说 grid 布局方法为二维布局提供了许多相当简便又容易理解的布局方法,比 flex 布局又强大了许多。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.