CSS Grid leere Zelle?

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

Answer 1

[Babelfish]

Leere Zellen kannst du mit Grid Template Areas und einem Punkt definieren:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#leaving_a_grid_cell_empty

Ich würde dir aber raten, eher Flexbox für deine Zwecke zu nutzen. CSS Grid ist besser für Seiten-Layouts geeignet und gedacht und einzelne Elemente und Bereiche kann man darin dann wieder gut mit Flexbox gestalten.

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[whgoffline]

Aber wie mache die leeren Zellen mit flexbox?

[Babelfish]

@whgoffline

Gar nicht. Du positionierst deine Elemente so, wie du sie haben willst und brauchst dann keine leeren Elemente.

Answer 2

[TechPech1984]

übst du grids oder warum so kompliziert , das sieht ja genauso schlimm aus wie früher tabellen layouts .

HTML ist doch keine Excel Tabelle . unendlich viel müll tags für nix .

Comments

[whgoffline]

Falls du das layout meinst ist das eh schon fest. Ich will ja eben etwas ähnliches wie eine Excel Tabelle machen nur eben im Browser ohne das man etwas herunterladen muss (oder gar für MS Office bezahlen).

[Babelfish]

@whgoffline

Wenn du Tabellen oder tabellenartige Daten anzeigen willst, dann nutze einfach das TABLE-Element. Das ist genau dafür gedacht und lässt sich auch am besten dafür einsetzen.

Answer 3

[EinAlexander]

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben.

Dann machst Du das so: https://jsfiddle.net/tb2e75L8/2/

Alex

Comments

[whgoffline]

Ich sehe da keinen Unterschied zu meinem aktuellen code..? Oder ist der schon maximal richtig?

[EinAlexander]

@whgoffline

<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div class="grid-item">Ein Text</div>
  <div></div>
  <div></div>
  <div>n</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>

[whgoffline]

@EinAlexander

Also einfach Leere div's? Sprich keine grid-template-areas nötig, ja?

[EinAlexander]

@whgoffline

Also einfach Leere div's? Sprich keine grid-template-areas nötig, ja?

Ja.