{"id":129111,"date":"2019-01-02T18:02:28","date_gmt":"2019-01-02T17:02:28","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-grid\/"},"modified":"2019-01-02T18:02:28","modified_gmt":"2019-01-02T17:02:28","slug":"create-a-fluid-grid","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/erstellen-ein-fluid-grid","title":{"rendered":"Erstellen Sie ein flie\u00dfendes Gitter"},"content":{"rendered":"

Fluid Grids k\u00f6nnen den Inhalt an die Bildschirmgr\u00f6\u00dfe anpassen. Auf Web-Bildschirmen sieht der Inhalt vielleicht besser in drei Spalten aus, w\u00e4hrend er auf Tablet-Bildschirmen besser in zwei Spalten dargestellt werden kann. Auf mobilen Bildschirmen sieht der Inhalt vielleicht am besten in einer Spalte gestapelt aus. Mit fluiden Rastern, die mit Ereignissen definiert werden, k\u00f6nnen Sie dies erreichen.
\n

Dreispaltiges Gitter:<\/h3>\n
    \n
  1. Ziehen Sie ein dynamisches Panel auf die Leinwand und \u00e4ndern Sie seine Breite auf 100%. \u00c4ndern Sie dann sein Layout auf horizontal und seine Ausrichtung auf zentriert. Stellen Sie sicher, dass der horizontale \u00dcberlauf auf „Umbruch“ eingestellt ist und f\u00fcgen Sie einen vertikalen und horizontalen Abstand von 20 Pixel hinzu.
  2. Ziehen Sie innerhalb dieses Bereichs einen weiteren dynamischen Bereich, der der erste Container f\u00fcr den Inhalt im Raster sein wird. Setzen Sie seine Breite auf 31%. Ziehen Sie einige Elemente in das dynamische Panel, die als Inhalt dienen sollen. In unserem Beispiel haben wir ein Rechteck mit einem Hintergrundbild und drei Text-Widgets gezogen.
  3. W\u00e4hlen Sie das von Ihnen erstellte Panel aus und kopieren Sie es, indem Sie Command\/Control-C dr\u00fccken. Klicken Sie dann auf das dynamische Basis-Panel, das Sie erstellt haben, und dr\u00fccken Sie Befehl\/Steuerung-V. Damit duplizieren Sie das Panel und platzieren es neben dem anderen Panel, das Sie gerade erstellt und kopiert haben. \"Mehrere<\/li>\n
  4. \u00c4ndern Sie den Inhalt dieses Fensters und geben Sie ihm das, was Sie m\u00f6chten.<\/li>\n
  5. Wiederholen Sie die Schritte drei und vier noch ein paar Mal, bis Sie sechs Paneele haben – so sollte Ihr dreispaltiges Panel aussehen:
    \n\"Alle<\/li>\n<\/ol>\n

    Zweispaltiges Gitter:<\/h3>\n
      \n
    1. Gehen Sie zur\u00fcck zum Basis-Panel und f\u00fcgen Sie ein weiteres Panel hinzu. Dies wird das zweispaltige Raster sein. \u00c4ndern Sie die Breite dieses Bereichs auf 100%, sein Layout auf horizontal und seine Ausrichtung auf zentriert. Stellen Sie sicher, dass der horizontale \u00dcberlauf ebenfalls auf „Umbruch“ eingestellt ist. Wenn Sie m\u00f6chten, k\u00f6nnen Sie das Raster noch etwas aufpolstern und Abst\u00e4nde hinzuf\u00fcgen.
      \n\"Konfiguration<\/p>\n
      Hinweis:<\/strong> Da der Inhalt in diesem Raster nicht breiter, sondern l\u00e4nger sein wird, m\u00fcssen Sie m\u00f6glicherweise die H\u00f6he dieses neuen Panels vergr\u00f6\u00dfern, damit der gesamte Inhalt hineinpasst.<\/div>\n<\/li>\n
    2. Ziehen Sie innerhalb dieses Bereichs einen weiteren dynamischen Bereich. Dies wird der Container f\u00fcr den Inhalt im zweispaltigen Raster sein. Setzen Sie seine Breite auf 47%. Ziehen Sie einige Elemente in das dynamische Panel, die als Inhalt dienen sollen. \"Zweis\u00e4ulige<\/li>\n
    3. W\u00e4hlen Sie das von Ihnen erstellte Panel aus und kopieren Sie es, indem Sie Command\/Control-C dr\u00fccken. Klicken Sie dann auf das dynamische Basis-Panel, das Sie erstellt haben, und dr\u00fccken Sie Befehl\/Steuerung-V. Dadurch wird das Panel dupliziert und neben dem anderen Panel platziert, das Sie erstellt haben. \"Ansicht<\/li>\n
    4. \u00c4ndern Sie den Inhalt dieses Fensters und geben Sie ihm das, was Sie m\u00f6chten.<\/li>\n
    5. Wiederholen Sie die Schritte drei und vier noch ein paar Mal, bis Sie sechs Felder haben:\"Alle<\/li>\n<\/ol>\n

      Einspaltiges Gitter:<\/h3>\n
        \n
      1. F\u00fcgen Sie dem Basis-Panel ein weiteres Panel hinzu. Dies wird das einspaltige Gitter sein. \u00c4ndern Sie in diesem Panel die Breite auf 100%. \u00c4ndern Sie dieses Mal das Layout in vertikal, aber behalten Sie die Ausrichtung in der Mitte bei. F\u00fcgen Sie ruhig einige vertikale Abst\u00e4nde und F\u00fcllungen hinzu.
        \n\"Konfiguration<\/p>\n
        Hinweis:<\/strong> Genau wie bei der letzten Spalte m\u00fcssen Sie, da der Inhalt in diesem Raster nicht breiter, sondern l\u00e4nger ist, die H\u00f6he dieses neuen Panels vergr\u00f6\u00dfern, damit der gesamte Inhalt hineinpasst.<\/div>\n<\/li>\n
      2. Ziehen Sie innerhalb dieses Bereichs einen weiteren dynamischen Bereich. Dies wird der Container f\u00fcr den Inhalt im Raster sein. Setzen Sie seine Breite auf 90%. Ziehen Sie ein Rechteck und drei Text-Widgets in das Panel. Dies ist der Inhalt des Rasters. \"Unter-Panels<\/li>\n
      3. W\u00e4hlen Sie das von Ihnen erstellte Panel aus und kopieren Sie es, indem Sie Command\/Control-C dr\u00fccken. Klicken Sie dann auf das dynamische Basis-Panel, das Sie erstellt haben, und dr\u00fccken Sie Befehl\/Steuerung-V. Dadurch wird das Panel dupliziert und unter dem anderen Panel platziert, das Sie erstellt haben. \"Ansicht<\/li>\n
      4. \u00c4ndern Sie den Inhalt dieses Fensters und geben Sie ihm das, was Sie m\u00f6chten.<\/li>\n
      5. Wiederholen Sie die Schritte drei und vier noch ein paar Mal, bis Sie sechs Felder haben:\"Alle<\/li>\n<\/ol>\n

        Haltepunkte<\/h3>\n

        Jetzt werden wir die Haltepunkt-Ereignisse erstellen, die je nach Bildschirmgr\u00f6\u00dfe zwischen den Spaltenansichten wechseln werden. Folgen Sie diesen Schritten, um zu erfahren, wie: <\/p>\n

          \n
        1. W\u00e4hlen Sie das dynamische Basis-Panel aus und erstellen Sie eine Funktion „Bei Fenstergr\u00f6\u00dfe \u00e4ndern“ + „Aktives Panel festlegen“ und w\u00e4hlen Sie das dreispaltige Panel aus, das als aktiv festgelegt werden soll.\n