如何让CSS Grid中带picture-folder类的元素固定在首列？

需求是让所有带picture-folder类的元素占据网格每行的第一列，普通picture_item填充后续列，预期效果如下：

picture folder | picture item | picture item | picture item 
picture folder | picture item | picture item | picture item 
picture folder | picture item | picture item | picture item 
empty          | picture item | picture item | picture item  
empty          | picture item | picture item | picture item 
empty          | picture item | picture item | picture item 
empty          | picture item | picture item | picture item 

现有HTML结构 #

<ul class="grid responsive__grid no__bullet p__0 picture-list">
  <li class="picture_item">
    <img class="picture_preview" src="1.jpg">
    <div class="picture-name">login_splash_screen.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="2.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item picture-folder">
    <a href="/fr/cms/pictures?prefix=intranet"><img alt="folder" class="icon-image folder-icon" src="/assets/mdi/folder.svg" title="folder"></a>
    <a class="picture-name" href="/fr/cms/pictures?prefix=intranet">intranet</a>
    <div class="pic">Un fichier</div>
    <div class="pic">25,278 Ko</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item">
    <img class="picture_preview" src="3.jpg">
    <div class="picture-name">la-belle-escola-banner.jpg</div>
  </li>
  <li class="picture_item picture-folder">
    <a href="/fr/cms/pictures?prefix=intranet"><img alt="folder" class="icon-image folder-icon" src="/assets/mdi/folder.svg" title="folder"></a>
    <a class="picture-name" href="/fr/cms/pictures?prefix=intranet">intranet</a>
    <div class="pic">Un fichier</div>
    <div class="pic">25,278 Ko</div>
  </li>
  <li class="picture_item picture-folder">
    <a href="/fr/cms/pictures?prefix=intranet"><img alt="folder" class="icon-image folder-icon" src="/assets/mdi/folder.svg" title="folder"></a>
    <a class="picture-name" href="/fr/cms/pictures?prefix=intranet">intranet</a>
    <div class="pic">Un fichier</div>
    <div class="pic">25,278 Ko</div>
  </li>
  <li class="picture_item picture-folder">
    <a href="/fr/cms/pictures?prefix=intranet"><img alt="folder" class="icon-image folder-icon" src="/assets/mdi/folder.svg" title="folder"></a>
    <a class="picture-name" href="/fr/cms/pictures?prefix=intranet">intranet</a>
    <div class="pic">Un fichier</div>
    <div class="pic">25,278 Ko</div>
  </li>

</ul>

当前CSS代码 #

.grid
{
  display: grid;
  gap: 1rem;
}

.responsive__grid
{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

问题分析 #

你之前尝试的.picture-folder{grid-column-start:1;grid-row-start:1;}会导致所有文件夹重叠，因为grid-row-start:1强制所有元素都放在第一行的第一列，自然会重叠。

解决方案 #

调整CSS，通过order属性让文件夹优先布局，同时指定它们占据第一列，普通元素自动填充剩余单元格：

.grid
{
  display: grid;
  gap: 1rem;
}

.responsive__grid
{
  /* 按预期每行4列，也可以保留auto-fit做响应式，列数会自动调整 */
  grid-template-columns: repeat(4, minmax(300px, 1fr));
}

.picture-folder {
  /* 让文件夹优先布局 */
  order: -1;
  /* 固定在第一列 */
  grid-column: 1;
}

说明 #

1. order: -1：让带picture-folder类的元素比普通元素（默认order为0）先被网格布局系统处理，这样它们会依次占据每行的第一列。
2. grid-column: 1：强制文件夹元素放在网格的第一列。
3. 普通元素会自动填充网格中剩余的单元格，没有文件夹的行第一列会留空，符合预期效果。

如果需要响应式布局，保持repeat(auto-fit, minmax(300px, 1fr))即可，列数会根据容器宽度自动调整，文件夹始终会占据每行的第一列。

内容的提问来源于stack exchange，提问作者Stéphane Dubois