File Browser Layout in CSS

Question

I want to build a file browser using HTML and CSS, similar to all common explorers. My problem turns out to be the width of the elements in each "row". I want the property values like size and edit date on the right to have the automatic width they need, and the file name on the left to fill out the rest.

That's quite easily done, but eventually I want all columns to have the same width (as done in a table).

However, CSS table doesn't seem to be an alternative because you can't style the table-row element properly, eg to have a closed border.

I have tried some grid and returned to 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

This obviously doesn't synchronize the width of the property elements among the .file-columns

Answer 1

CSS-Grid can do that.

Note: I have removed the wrapping .file divs as they are unnecessary and indeed break the CSS-Grid layout

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

As a border is required around each file-set then CSS-tables will work..

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