marctrix: Gestaltung mit Flexbox

Beitrag lesen

Hej Henry,

Du zeigst ein Beispiel, was nicht ohne Grid gehen soll.

Da gab es wohl ein Missverständnis.

Es gab erst eine Anfrage vom OP zu einem Layout, auf das du auch eingegangen bist. Allerdings hatte ich das für mich schon als gelöst abgehakt, egal ob mittels grid oder veralteter Technik (ja man kann das ohne Grid machen, wenn man muss, weil mehrere Spalten auch im IE10 sein sollen - es gibt schon mal so Kundenanfragen).

Dein Beispiel taugt dafür aber leider nicht.

Dennoch dachte ich, dieser Drops sei gelutscht, als du folgendes geschrieben hast:

Genau so sehe ich das auch, allerdings andersrum. Erst recht, wenn ich ich hier die die Verzwickungen in diesem Thread sehe.

Ich meinte daher, dass du mit Verzwickungen mein noch ungelöstes Problem in einem Nebenast dieses Threads gemeint hast und habe darum geantwortet:

Bei den Verwicklungen geht es um ein Problem, dass ohne Flexbox oder grid auf gar keinen Fall zu lösen wäre. Oder wie bekommst du mit floats o.ä. ein Element so hoch wie beliebig viele andere, deren Inhalt du nicht kennst? 😉

Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid alles machen, was mit Grid geht, stimmt so nicht.

Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.

Ungelöst ist nach wie vor das nun schon mehrfach von mir beschriebene Problem. Offenbar ist das derzeit weder mit noch ohne Grid zu lösen.

Allerdings mag es sich dabei um Fehler in den Browsern handeln, nicht am CSS Grid, wie Gunnar vermutet hat.

So oder so: CSS Grid ist die erste und einzige Technik, die speziell für zweidimensionale Layouts von Webseiten zur Verfügung steht. Alles vorher waren Hacks, mit denen wir uns abgemüht haben, weil es keine vernünftige Technik gab.

Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:

display: grid;
grid-template-columns: 1fr 1fr;

Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?

Grid ist einfach. Nicht nur für mich als Entwickler.

Auch als Dozent kann ich nur sagen: es war nie leichter, layouten zu unterrichten.

Marc

0 93

Gestaltung mit Flexbox

Renato
  • css
  • flexbox
  1. 0
    MrMurphy1
  2. 0
    Gunnar Bittersmann
    • css
    • flexbox
    • grid
    1. -3
      Henry
      1. 1
        Gunnar Bittersmann
        1. -1
          Henry
          1. 0
            Gunnar Bittersmann
            1. 0
              Henry
              1. 0
                Gunnar Bittersmann
                1. 0
                  Henry
                  1. 1
                    Gunnar Bittersmann
                    • css
                    • grid
                    1. 0
                      Tabellenkalk
              2. 0
                Gunnar Bittersmann
                1. -3
                  Henry
                  1. 1

                    "klassisches Tabellenlayout"

                    Regina Schaukrug
                    1. 0
                      Henry
        2. 0
          marctrix
          1. 0
            marctrix
            1. 0
              marctrix
            2. 0
              Matthias Apsel
              • css
              1. 0
                marctrix
                1. 0
                  ottogal
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      marctrix
                      • css
                      • grid
                      1. 0
                        ottogal
                        1. 0
                          marctrix
                          1. 0
                            Gunnar Bittersmann
                        2. 1
                          Gunnar Bittersmann
            3. 0
              Gunnar Bittersmann
              • css
              • grid
              1. 0
                marctrix
      2. 0
        marctrix
        1. 0
          Henry
          1. 0
            marctrix
            1. 0
              MrMurphy1
            2. 0
              Henry
              1. 0
                marctrix
                1. 0
                  Henry
                  1. 0
                    marctrix
                    1. 0
                      Henry
                      1. 2
                        Christian Kruse
                        1. 0
                          Henry
                          1. 0
                            Christian Kruse
                            1. 0
                              Henry
                              1. 1
                                Christian Kruse
                                1. 0
                                  Henry
                                  1. 0
                                    Christian Kruse
                                    1. 1
                                      marctrix
                                      1. 0
                                        Henry
                                        1. 0
                                          marctrix
                                          1. 1
                                            Henry
                                            1. 0
                                              marctrix
                                              1. 1
                                                MudGuard
                                                1. 0
                                                  marctrix
                                                  1. 0
                                                    MudGuard
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      • menschelei
                                                      1. 0
                                                        MudGuard
                                                        1. 0
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            MudGuard
                                                            1. 0
                                                              Gunnar Bittersmann
                                                    2. 0
                                                      marctrix
                                2. 0
                                  marctrix
                                  • menschelei
                                  • sonstiges
                                  1. 0
                                    Christian Kruse
                                    1. 0
                                      marctrix
                                      1. 1
                                        Christian Kruse
                                        1. 0
                                          marctrix
                                    2. 0

                                      Hardware ...

                                      MudGuard
                                      1. 0
                                        Christian Kruse
                                        1. 0
                                          MudGuard
                                          1. 0
                                            Christian Kruse
                                            1. 0
                                              MudGuard
                                              1. 0
                                                Christian Kruse
                                              2. 0
                                                Gunnar Bittersmann
                                                1. 1
                                                  MudGuard
                                                  1. 0
                                                    Gunnar Bittersmann
                                                    • menschelei
                                    3. 1
                                      Matthias Apsel
                                      1. 1
                                        Christian Kruse
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Christian Kruse
                                            1. 0
                                              Matthias Apsel
                                              1. 0
                                                Christian Kruse
                                                1. 1
                                                  Matthias Apsel
                          2. 0
                            marctrix
                      2. 0
                        marctrix
                        1. 0
                          Henry
                          1. 0
                            marctrix
                            1. 0
                              Henry
                              1. 0
                                marctrix
              2. 0
                marctrix
          2. 0
            Gunnar Bittersmann
            1. 0
              Henry
              1. 0
                Gunnar Bittersmann
                1. 0
                  marctrix
                  1. 1
                    Gunnar Bittersmann