如何实现斜切网格/Flexbox布局，仅容器倾斜且内部内容保持端正

问题1：内部内容未抵消倾斜的修复 #

• 先排查HTML语法错误：你写的.grid-item元素类名属性少了闭合双引号，正确写法是<div class="grid-item item1"></div>，语法错误会导致类选择器不生效，反向skew自然没有作用。
• 补充必要的样式属性：确保grid-item完全填充父容器，背景图配置正确：

.grid-item {
  transform: skew(12.5deg);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

• 更简单的替代方案：用clip-path实现斜切容器，不需要调整内部元素：

.grid-container {
  /* 数值可根据你需要的斜切角度调整 */
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

问题2：子元素自动换行的修复 #

两种方案可选，都可以实现单行排列：

方案1：继续使用Grid布局 #

显式指定横向列数、强制横向排列即可：

.grid-container {
  display: grid;
  /* 5对应你的子元素数量，有几个就写几个 */
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: column;
  /* 可按需加列间距 gap: 12px; */
  transform: skew(-12.5deg);
  overflow: hidden;
}

方案2：切换为Flex布局 #

更适合单行等分布局场景，写法更简洁：

.grid-container {
  display: flex;
  /* 强制不换行 */
  flex-wrap: nowrap;
  transform: skew(-12.5deg);
  overflow: hidden;
}
.grid-item {
  /* 所有子元素等分宽度 */
  flex: 1;
  transform: skew(12.5deg);
}

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