Search code examples
csscss-grid

How to generate a grid with all elements with a certain class in the first column?

This is a CSS grid question, I have a list of elements displayed as a grid. I would like to place the elements with a class of picture-folder in the first column (cell) of every row.

Expected output would be as followed:

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

I have the following HTML (We can have more or less elements)

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

My CSS so far

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

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

I tried using .picture-folder{grid-column-start:1;grid-row-start:1;} but all the picture-folder items overlap each other

Solution

  • You may also use order aside grid-column selecting the .picture-folder class

    .grid {
  display:grid;
  grid-auto-flow:row dense;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}
.picture-folder,.grid:after {
  grid-column:1;
  order:-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>

    To clear the first-column , you may use a pseudo element spanning many rows, that becomes a trick, javascript would be useful to set the number of rows to clear

    .grid {
  display:grid;
  grid-auto-flow:row dense;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}
.picture-folder,.grid:after {
  grid-column:1;
  order:-1;
}

/* here the value would deserved to be updated via javascript  or extra rules using the :has() selector if you use a preprocessor*/
.grid:after {
  content:'';
  grid-row:auto / span 4
}
    <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>