使用Grid属性结合template columns和rows实现列布局问题求助

问题说明 #

我尝试用Grid布局实现行列展示，参考了极简CSS响应式方法（仅需一行核心代码），目前完成了大部分效果，但存在两个问题：

• 列无法正确对齐
• 移动端没有垂直滚动条

问题截图：

以下是原代码，以及对应的修复方案：

原代码 #

JavaScript #

var slider = document.getElementById('slider');
var toggle = document.getElementById('toggle');

toggle.addEventListener('click', function() {
  var isOpen = $slider.classList.contains('slide-in');

  slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

function myFunction() {
  var change = document.getElementById("toggle");
  if (change.textContent == "Close") {
    change.textContent = "Before After Result";
  } else {
    change.textContent = "Close";
  }
}

CSS #

#slider {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 3fr));
  grid-template-rows: repeat(2, 100px);
  position: fixed;
  bottom: 25px;
  width: 100%;
  background: blue;
  transform: translateX(-100%);
}

#slider > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-in {
  animation: slide-in 0.5s forwards;
}
.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

HTML #

<div class="container">
  <div id="slider" class="slide-in">
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
  </div>
</div>

<button id="toggle" onclick="myFunction()" style="position:fixed;bottom:0;background-color:#f14e4e;overflow:auto;" class="button4">Close</button>

修复方案 #

1. 列对齐问题修复 #

原grid-template-columns中repeat(auto-fit, minmax(100px, 3fr))的3fr会导致列宽分配异常，因为auto-fit配合分数单位时，多出来的空间会被不合理分配。将3fr改为1fr，让所有列均分可用空间：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

2. 移动端垂直滚动条修复 #

固定定位的#slider不会触发页面滚动，需给滑块添加垂直溢出控制，并限制最大高度避免遮挡内容：

#slider {
  /* 保留原有属性 */
  max-height: 80vh; /* 限制高度为视口80%，避免占满屏幕 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

3. JS语法错误修复 #

原代码中$slider未定义，需改为已声明的slider变量，否则点击按钮会报错：

toggle.addEventListener('click', function() {
  var isOpen = slider.classList.contains('slide-in'); // 修正$slider为slider
  slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

完整修正代码 #

JavaScript #

var slider = document.getElementById('slider');
var toggle = document.getElementById('toggle');

toggle.addEventListener('click', function() {
  var isOpen = slider.classList.contains('slide-in');

  slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

function myFunction() {
  var change = document.getElementById("toggle");
  if (change.textContent == "Close") {
    change.textContent = "Before After Result";
  } else {
    change.textContent = "Close";
  }
}

CSS #

#slider {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(2, 100px);
  position: fixed;
  bottom: 25px;
  width: 100%;
  background: blue;
  transform: translateX(-100%);
  max-height: 80vh;
  overflow-y: auto;
}

#slider > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-in {
  animation: slide-in 0.5s forwards;
}
.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

HTML #

<div class="container">
  <div id="slider" class="slide-in">
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
    <div><img src="Untitled-1.png" /></div>
  </div>
</div>

<button id="toggle" onclick="myFunction()" style="position:fixed;bottom:0;background-color:#f14e4e;overflow:auto;" class="button4">Close</button>

内容的提问来源于stack exchange，提问作者SarahLacy