Hi,
bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.
Aktuelle habe ich folgenden Code
<div class="grid-container">
<div>Ich soll leer sein</div>
<div>Ich soll leer sein</div>
<div>Ich soll leer sein</div>
<div class="grid-item">Ein Text</div>
<div>Ich soll leer sein</div>
<div>Ich soll leer sein</div>
<div>Ich soll leer sein</div>
<div class="grid-item">Ein Text</div>
<input type="text" class="grid-item">
<div class="grid-item">Ein Text</div>
<select class="grid-item"></select>
<div class="grid-item">Ein Text</div>
</div>
CSS
.grid-container {
display: grid;
gap: .5em;
grid-template-columns: repeat(4, 1fr);
}
https://jsfiddle.net/tb2e75L8/2/
Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?
Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.
Vielen Dank im Voraus
whgoffline
