TYPO3 - Change Layout according to amount of entrys - foreach

Question

I want to change my Page Layout according to how many files are existing.
I developed the following code:
<f:for each="{files}" as="file">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:for>
Now there are different cases:
No files given -> empty div
1 File given -> Just show the one File
2 Files given -> Add Row with two columns, each column is col-6 and contains the file
3 Files given -> row(col-6, col-6), row(col-6)
4 Files given -> 2 rows, each with 2 col-6
5 or more files -> Just show the first 4 Files (as described in "4
files given")
How can i accomplish something like this.
I am using Typo3-9.5.5 btw
Is this a possible solution?
<f:switch expression="{files -> f.count()}">
<f:case value="0">EMPTY</f:case>
<f:case value="1">ONE</f:case>
<f:case value="2">TWO</f:case>
<f:case value="3">THREE FILES</f:case>
<f:case value="4">FOUR</f:case>
<f:defaultCase>MORE THAN FOUR</f:defaultCase>
</f:switch>
How can i address for exmaple the third element in {files} does it work like this: {files}[2]?
EDIT:
I solved it like this (There was no need for more than one row class):
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<div class="row download-row">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper ">
<a href="/fileadmin/{files.0.identifier}" target="_blank">
<div class="fileinfo">
{files.0.originalFile.properties.name}<br>
({files.0.originalFile.properties.size})
</div>
</a>
</div>
</div>
<div class="col-6"></div>
</div>
</f:then>
<f:else>
<div class="row">
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{files.iterator.identifier}" target="_blank">
<div class="fileinfo test">
{file.originalFile.properties.name}<br>
({file.originalFile.properties.size}
</div>
</a>
</div>
</div>
</f:if>
</f:for>
</f:else>
</f:if>
</f:if>

Answer 1

Depending on your variety of cases you might use different f:for viewhelper or change just the rendering inside of one single f:forviewhelper for all.
But you also should make use of the information an iterator will give you inside the f:for viewhelper.
You also might use a f:cycle viewhelper, so you do not need to caclulate modulo.
Number of files: {files->f:count()}<br />
<f:for each="{files}" as="file" iteration="iterator">
<f:cycle values="{0: 'odd', 1: 'even'}" as="cycler">
<f:debug title="inside the loop">{file:file, iterator:iterator, cycler:cycler}</f:debug>
</f:cycle>
</f:for>
EDIT:
regarding your cases I think you must consider two variants:
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<f:render section="item" arguments="{file:file}" />
</f:then>
<f:else>
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<f:if condition="iterator.isOdd"><div class="row"></f:if>
<div class="col-6">
<f:render section="item" arguments="{file:file}" />
</div>
<f:if condition="iterator.isEven"></div></f:if>
</f:if>
</f:for>
<f:if condition="{files->f:count()} == 3"></div></f:if>
</f:else>
</f:if>
</f:if>
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:section>
EDIT2:
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<f:link.typolink parameter="{file.publicUrl}" target="_blank">
{file.identifier}
<span class="filesize"> ({file.size->f:format.bytes()})</span>
</a>
</div>
just remember: aside of the properties visible in a <f:debug title="file">{file}</f:debug> you have a lot of other properies, given by the getters you could see in the API