CSS Erste versuche mit Grid

[Pit]

Hallo,

nachdem ich früher viele Formulare o.ä. mit Tabellen formatiert habe, möchte ich dazu übergehen, dieses per CSS Grid zu machen.

In meinem ersten Versuch hierzu stellt sich mir aber die Frage, wie ich mehrer Einträge untereinander aufführen kann, sodass diese in derselben "Zeile" stehen.

Kann mir da einer helfen?

Pit

[Tabellenkalk]

Hallo,

Kann mir da einer helfen?

Bestimmt findet sich jemand, ich habe aber schon Schwierigkeiten "selbe Zeile, aber untereinander" zu verstehen…

Gruß
Kalk

[Pit]

Bestimmt findet sich jemand, ich habe aber schon Schwierigkeiten "selbe Zeile, aber untereinander" zu verstehen…

Danke für den Hinweis. Ich versuchs nochmal: Innerhalb einer Tabelle würde ...

<tr>
<td>Zeile 1</td>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
</tr>

<tr>
<td>Zeile 2</td>
<td>Inhalt</td>
</tr>

... diese beiden Zeilen so untereinander und nebeneinander stehen, dass man sieht, sie gehören zueinander.

Wie erreiche ich dasselbe in einem CSS Grid?

Pit

[Rolf B]

Hallo Pit,

du willst eine Table mit einem Grid nachbauen? D.h. feste Zahl von Spalten aber beliebig viele Zeilen?

Dann musst Du das Grid anders definieren. Schau Dir das hier mal an. Musst Du für deinen Fall entsprechend abspecken - den repeat wirst Du vermutlich nicht brauchen.

Einfach die Spaltenbreiten festlegen, und dann nacheinander die rinken und lechten Elemente herunterrasseln. Gerne auch als <label> und <input>. Das Grid verteilt sie dann schon.

Rolf

[Pit]

Hallo Rolf,

Einfach die Spaltenbreiten festlegen, und dann nacheinander die rinken und lechten Elemente herunterrasseln. Gerne auch als <label> und <input>. Das Grid verteilt sie dann schon.

Dank Dir, das sieht schon ganz gut aus.

Und Danke nochmal für Deinen letzten Tip mit den scrollbaren Divs in den Zellen, ich habe das inzwischen umgesetzt und das ist richtig gut geworden!

Pit

[Gunnar Bittersmann]

@@Pit

Dank Dir, das sieht schon ganz gut aus.

Nein, das sieht es nicht. Der Inhalt lässt erkennen, das es sich um tabellarische Daten handelt. In dem Fall „ist alles andere als eine Tabelle falsch.“ [Cheatah]

LLAP 🖖

[Rolf B]

Hallo Gunnar,

das ist auch nicht das, wofür er das Grid eingeplant hat. Er sprach vom Umwandeln von Formularen. Ich hoffe mal, dass das Fiddle eine Spielwiese ist.

Sowas wäre wohl eher das, worauf es hinauslaufen sollte. Ich hab auch gleich mal die variable Höhe aus unserem Wiki herausgesucht und eingebaut.

Achja Pit - der IE ist hier nicht up-to-date, er nennt grid-template-columns noch -ms-grid-columns. Du musst beides einsetzen.

Rolf

[Pit]

@@Pit

Dank Dir, das sieht schon ganz gut aus.

Nein, das sieht es nicht. Der Inhalt lässt erkennen, das es sich um tabellarische Daten handelt. In dem Fall „ist alles andere als eine Tabelle falsch.“ [Cheatah]

Hi Gunar,

vergiss den Inhalt, der war sowas von "erfunden". Es sind wirklich definitiv keine tabellarischen Daten, es sind "Formdaten" ala

Datum: dd.mm.yyyy
User: Tester1
Ort: München
Auftrag: Bla123Blub234

usw.

Pit

[Gunnar Bittersmann]

@@Pit

Es sind wirklich definitiv keine tabellarischen Daten

Nicht?

es sind "Formdaten" ala

Datum: dd.mm.yyyy
User: Tester1
Ort: München
Auftrag: Bla123Blub234

Das muss man nicht als tabellarischen Daten ansehen, kann man aber.

Label als Zeilenköpfe, Eingabefelder als Datenzellen – passt schon.

<table>
	<tbody>
		<tr>
			<th><label for="date">Datum:</label></th>
			<td><input type="date" id="date" name="date"/></td>
		</tr>
		<tr>
			<th><label for="user">User:</label></th>
			<td><input type="text" id="user" name="user"/></td>
		</tr>
	</tbody>
</table>

ist nicht unbedingt falsch.

LLAP 🖖

[Pit]

... </table>

ist nicht unbedingt falsch.

... wäre mir durchaus recht, weil es noch 2-3 Problemchen mit der Formatierung gibt, die ich tabellarisch recht locker lösen würde... 😉

Dennoch find ichs gut, "css-Grid-Layout" kennengelernt habe. Da steckt echt "Power" drin, doe ich zukünftig gerne nutzen würde.

Aber wenn Du "grünes Licht" für eine Tabelle gibst, ... mir wärs grad' recht lach

Pit

[Gunnar Bittersmann]

@@Pit

... wäre mir durchaus recht, weil es noch 2-3 Problemchen mit der Formatierung gibt, die ich tabellarisch recht locker lösen würde... 😉

Die da wären?

Dennoch find ichs gut, "css-Grid-Layout" kennengelernt habe. Da steckt echt "Power" drin, doe ich zukünftig gerne nutzen würde.

Unbedingt.

Aber wenn Du "grünes Licht" für eine Tabelle gibst, ... mir wärs grad' recht lach

Ich gebe auch grünes Licht für Grid.

LLAP 🖖

[Pit]

@@Gunnar Bittersmann

... wäre mir durchaus recht, weil es noch 2-3 Problemchen mit der Formatierung gibt, die ich tabellarisch recht locker lösen würde... 😉

Die da wären?

Es sind Probleme der Formatierung. Muß ich noch ermitteln, ob das überhaupt Grid-Probleme selber sind oder die doch eher mit dem Plugin zusammenhängen, das ich verwende.

Aber wenn Du "grünes Licht" für eine Tabelle gibst, ... mir wärs grad' recht lach

Ich gebe auch grünes Licht für Grid.

Na siehste? Also acker ich mich da jetzt mal durch und verzichte auf die Tabelle. Wenn ich csss grid öfter nuten möchte, kanns ja nicht schaden, sich da jetzt durchzuwurschteln.

Pit