在开发页面过程中需要实现两个有意思的布局样式，在此记录并分享一下。
样式一：
实现思路:
通过分析，上图布局可以明确分为 3行 2列，各图片占位如下图：
- 通过使用
grid-template-areas属性定义网格模板区域实现 - 通过
grid-row-start和grid-row-end设置网格行的起始和终止位置
具体代码如下：
<div class="image-group">
<img class="image-item item1" src="1.png" alt=""/>
<img class="image-item item2" src="2.png" alt=""/>
<img class="image-item item3" src="3.png" alt=""/>
</div>
.image-group {
display: grid;
gap: 20px;
grid-template-areas:
"item1 item2"
"item3 item2";
/*按比例设置每行每列*/
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr 6.25fr 9fr;
}
.image-group.image-item {
width: 100%;
height: 100%;
display: block;
}
.item1 {
grid-area: item1; /* 左上角图片 */
grid-row-start: 1;
grid-row-end: 3;
}
.item2 {
grid-area: item2; /* 右侧图片 */
grid-row-start: 2;
grid-row-end: 4;
}
.item3 {
grid-area: item3; /* 左下角图片 */
grid-row-start: 3;
grid-row-end: 4;
}
样式二：
实现思路：
- 跟上面的布局差不多，可以浅显的理解为用
grid-row代替了grid-row-start和grid-row-end，用grid-column代替了grid-template-areas
<div class="images-container">
<img class="image-item item1" src="1.png" alt=""/>
<img class="image-item item2" src="2.png" alt=""/>
<img class="image-item item3" src="3.png" alt=""/>
<img class="image-item item4" src="4.png" alt=""/>
</div>
.images-container {
display: grid;
/* 定义3列 */
grid-template-columns: 1.379fr 1fr 1.91fr;
/* 定义2行 */
grid-template-rows: 1fr 1fr;
gap: 20px;
}
.item1 {
grid-column: 1/2;
grid-row: 1/3;
aspect-ratio: 400 / 600;
}
.item2 {
grid-column: 2/3;
grid-row: 1/2;
aspect-ratio: 290 / 290;
}
.item3 {
grid-column: 3/4;
grid-row: 1/2;
aspect-ratio: 554 / 290;
}
.item4 {
grid-column: 2/4;
grid-row: 2/3;
aspect-ratio: 864 / 290;
}
总结：
grid-auto-columns：定义当网格项目需要超出你用grid-template-columns定义的列时，自动创建的额外列的宽度grid-auto-rows：定义当网格项目需要超出你用grid-template-rows定义的行时，自动创建的额外行的高度grid-auto-flow：控制没有明确放置位置的网格项目（items）如何自动放置，常用值如下：-
row【默认值】：优先填充行，内容会从左到右依次填充一行，填满后再换下一行column：优先填充列dense：这是一个“优化”选项，可以和row或column一起使用（例如：grid-auto-flow: row dense;）。它的作用是，当网格中有一些空白小格子时，它会尝试把后面较小的积木“塞”进这些空白格子，以减少网格中的空隙
grid-template-columns：用于定义网格有多少列grid-template-rows：用于定义网格有多少行
grid-area是grid-row-start、grid-column-start、grid-row-end、grid-column-end组合属性的简写grid-column是grid-column-start和grid-column-end组合属性的简写grid-row是grid-row-start和grid-row-end组合属性的简写grid-template是grid-template-area、grid-template-columns和grid-template-rows组合属性的简写order：设置了flex或grid容器中项目的布局顺序，数值越小位置越靠前-
- 使用场景：在本次开发中用到此属性的场景是，在PC端一个容器中 文字在前图片在后，而在移动端图片在前，文字在后，可以使用此属性控制
