CSS栅格结构不规则元素布局

制作类似于小米商城中不规则元素布局的排列（栅格结构）

分析图中元素布局（图示）👆👆👆

分析过程

1、栅格结构的行列号如下

2、根据分析图，第一个横向元素是占第1列到第3列，第1行到第2行

CSS代码：

div:first-child{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}

源码

<style>
  article{/* 设置一个300*300的框架并用边框框起来 */
      width: 300px;
     height: 300px;
border: solid 5px silver;
/* 设置为栅格格式，横竖都是2个元素，各占一份 */
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns:repeat(2,1fr) ;
}
div{
/* 设置背景 */
background: blueviolet;
/* 背景根据内容切割 */
background-clip: content-box;
 /* 设置边框 */
border: solid 1px black;
padding: 10px;
color: white;
font-size: 25px;
}
div:first-child{
/* 元素占用第1行开始 */
grid-row-start: 1;
/* 元素占用第2行结束 */
grid-row-end: 2;
/* 元素占用第1列开始 */
grid-column-start: 1;
/* 元素占用第3列结束 */
grid-column-end: 3;
}
</style>


<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>