Pit: CSS Erste versuche mit Grid

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

  1. Hallo,

    Kann mir da einer helfen?

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

    Gruß
    Kalk

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

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

    --
    sumpsi - posui - clusi
    1. 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

      1. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. 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

          --
          sumpsi - posui - clusi
        2. @@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

          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. ... </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

              1. @@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 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. @@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