用CSS创建带图像的动画网格布局，鼠标悬停时，左右两列会像开门一样平滑地向两边收缩和展开，支持展开时间、以及图片的自定义，它有助于为网页添加交互式视觉效果，可以在网站标题或特色部分使用此代码，动态展示图片。
下面展示如何使用 CSS 创建悬停网格列打开效果
1.首先设置 HTML 结构。创建一个 id 为 "grid "的 div，并在其中添加三个类别分别为 "left"、"middle "和 "right "的 div 元素。
<div id="grid"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>
2.接下来，使用 CSS 为网格和图像设置样式。为元素设置基本样式，如填充和边距调整，并定义过渡效果以实现流畅的动画效果。使用 CSS 网格属性定义网格布局。设置 grid-template-columns 属性，以便在列之间均匀分配空间。利用 CSS 悬停选择器在网格悬停时触发动画效果。调整 grid-template-columns 属性值，以调整列宽。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
#grid {
width: calc(100% - 20vmin);
aspect-ratio: 16 / 7;
background: linen;
display: grid;
grid-template-columns: 1fr 0fr 1fr;
place-items: center;
outline: 2px solid #804a00;
border-radius: 5vmin;
box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
overflow: hidden;
}测试动画，并根据需要进行调整。尝试使用不同的过渡时间，以达到所需的效果。
