.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns with equal width */
gap: 10px; /* Space between grid items */
}
/*这是grid的代码*/
.grid-item {
text-align: center;
}
/* Add CSS styles to display the images in a grid layout with 3 images per row */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
width: 100%; /* Adjust the width of each grid item */
height: auto; /* Ensure the height adjusts according to the content */
}
.hover-image-container img {
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transition: opacity 0s ease-in-out, transform 0s ease-in-out;
will-change: opacity, transform; /* 提前告诉浏览器优化动画 */
}
.hover-image-container .hover-img {
filter: brightness(0.95);
}
.hover-image-container:hover .hover-img {
filter: brightness(1);
}
/* 优化后的 CSS 样式 */
/* Container 样式 */
.container {
max-width: 1200px; /* 最大宽度，常用值为 1200px 或 1440px */
margin: 0 auto; /* 居中显示 */
padding: 0 20px; /* 左右内边距，避免紧贴边缘 */
}
/* 📐 Grid布局：随屏幕变化自动排列 */
.outwit-grid-container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
justify-items: center;
}
/* Grid 容器样式 */
.grid-container {
width: 100%; /* 宽度占满父元素 */
display: grid;
grid-template-columns: repeat(3, 1fr); /* 4 列 */
gap: 10px; /* 图片之间的间距 */
@media (max-width: 1080px) {
grid-template-columns: repeat(2, 1fr); /* 在小屏幕下显示为 3 列 */
}
margin: 0 auto; /* 垂直居中 */
}
/* 📐 Grid布局：随屏幕变化自动排列 */
.outwit-grid-container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
justify-items: center;
}
/* Grid 元素样式 */
.grid-item {
width: 100%;
max-width: 770px;
position: relative;
overflow: hidden;
border-radius: 10px;
}
/* Hover 切换样式 */
.hover-image-container {
position: relative;
width: 100%;
overflow: hidden;
}
.hover-image-container img {
width: 100%; /* 设置宽度为100% */
display: block;
transition: opacity 0s ease;
}
/* Hover 切换样式 */
.hover-image-container {
position: relative;
width: 100%;
overflow: hidden;
}
.hover-image-container img {
width: 100%;
display: block;
transition: opacity 0s ease;
}
.hover-image-container .hover-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.hover-image-container:hover .hover-img {
opacity: 1;
}
.hover-image-container:hover .default-img {
opacity: 0;
}
