如何生成一个网格，其中第一列中具有特定类的所有元素？

Question

这是一个 CSS 网格问题，我有一个显示为网格的元素列表。我想将具有图片文件夹类的元素放置在每行的第一列（单元格）中。

预期输出如下：

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;}

，但所有图片文件夹项目都相互重叠

Answer 1

使用

grid-auto-flow: column

，然后将元素放入

grid-column: 1

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

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

.picture-folder {
  background: lightblue;
  grid-column: 1;
}

<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>