Макет браузера файлов в CSS

Question

Я хочу создать файловый браузер, используя HTML и CSS, как и все обычные исследователи. Моя проблема, оказывается, ширина элементов в каждой «строке». Я хочу, чтобы значения свойств, такие как размер и дата редактирования справа, имели необходимую им автоматическую ширину, а имя файла слева заполняло остальные.

Это довольно легко сделать, но в итоге я хочу, чтобы все столбцы имели одинаковую ширину (как в таблице).

Однако таблица CSS, похоже, не является альтернативой, потому что вы не можете правильно оформить элемент строки таблицы, например, иметь закрытую границу.

Я попробовал сетку и вернулся во flexbox ...

<div class="file">
    <div class="property-name">
        Name.pdf
    </div>
    <div class="property-size">
        12 MB
    </div>
    <div class="property-date">
        12.08.2000
    </div>
</div>
<div class="file">
    <div class="property-name">
        Prooxey.pdf
    </div>
    <div class="property-size">
        1 TB
    </div>
    <div class="property-date">
        11.11.1111
    </div>
</div>

SASS:

.file
  display: flex
  [name^='property']
     flex: auto 0 0
  .property-name
     flex: auto 1 1

Это явно не синхронизирует ширину элементов свойства среди .file-столбцов

Answer 1

CSS-Grid может сделать это.

Примечание. Я удалил упаковочные элементы .file, поскольку они не нужны и действительно нарушают макет CSS-Grid

.files {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}

.files div {
  border: 1px solid grey;
  padding: .25em;
}

<div class="files">
  <div class="property-name">
    Name.pdf
  </div>
  <div class="property-size">
    12 MB
  </div>
  <div class="property-date">
    12.08.2000
  </div>
  <div class="property-name">
    Prooxey.pdf
  </div>
  <div class="property-size">
    1 TB
  </div>
  <div class="property-date">
    11.11.1111
  </div>
</div>

Поскольку для каждого набора файлов требуется граница, CSS-таблицы будут работать ..

.files {
  display: table;
  border-collapse: collapse;
}

.file {
  display: table-row;
  border: 1px solid grey;
}

.file div {
  display: table-cell;
  padding: .25em;
}

<div class="files">
  <div class="file">
    <div class="property-name">
      Name.pdf
    </div>
    <div class="property-size">
      12 MB
    </div>
    <div class="property-date">
      12.08.2000
    </div>
  </div>
  <div class="file">
    <div class="property-name">
      Prooxey.pdf
    </div>
    <div class="property-size">
      1 TB
    </div>
    <div class="property-date">
      11.11.1111
    </div>
  </div>
</div>