filter: grayscale(1);
filter: grayscale(.95);
-webkit-filter: grayscale(.95);

.mask{
    width:100%;
    height:100%;
    position:fixed;
    background-color:#999;
    z-index:99;
    top:0;
    left:0;
    opacity:0.5;
}

//1
margin: 0 auto;
width: fit-content;
//2
display:inline-block; 
display:inline; 
zoom:1;

# grid

grid
grid-column-start //从第一列
grid-column-end //从末尾列

grid-column: 1 //第一纵线开始
grid-column: 1/4 //第一纵线到第4纵线覆盖

grid-area: 1/3/4/3 //第一横线和第三纵线开始，第四横线和第四纵线结束

1. content-visibility: auto
2. loading=lazy 与 decoding=async

<div class="g-container">
    <img src="image1.jpeg" loading="lazy" decoding="async">
    <img src="image2.jpeg" loading="lazy" decoding="async">
    // ... 339 个
</div>

相当于给子组件设置宽度
.body ::v-deep img {
  width: 100%;
  object-fit: fill;
}

1. 居中

1. 边框问题

transform: rotateZ(360deg);