CSS Grid布局失效求助：频道图片与文本未按网格排列

你遇到的频道图片与文本未横向排列的问题，核心错误出在video-info-grid的网格列定义上：

• CSS Grid的grid-template-columns属性中，列宽值之间需要用空格分隔，而非逗号。你的代码里写了：

  .video-info-grid {
      display: grid;
      grid-template-columns: 50px, 1fr; /* 这里的逗号是错误的 */
  }
  

  逗号会被浏览器识别为无效语法，导致网格布局不生效，元素只能默认垂直堆叠。

修正方法很简单，把逗号换成空格即可：

.video-info-grid {
    display: grid;
    grid-template-columns: 50px 1fr; /* 用空格分隔列宽 */
}

修改后，频道图片会占据50px宽度的列，文本区域会自动填充剩余空间，实现你期望的横向网格布局。

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