#050: Das Gallery Grid aufbauen

Wir beginnen mit dem Layout des Gallery-Bereichs, etwas, das mir seit Beginn dieses Redesign-Prozesses im Kopf herumschwirrt. Hauptsächlich, weil... die Galerie in v9 irgendwie mies war. Wir werden es dieses Mal besser machen.

Wir werden das Galerie-Layout zu einem großen Raster aus Bildern machen. Das haben andere Galerien, die angenehm zu durchsuchen sind, und das sollte auch hier so sein. Mit anderen Worten: keine Seitenleiste, mehr Bilder.

Wir stützen das Layout auf den Artikel Seamless Responsive Photo Grid, den ich vor einiger Zeit gemacht habe. Im Wesentlichen lassen wir alle Bilder als Inline-Blocks in ein Elternelement fallen, das CSS3-Spalten verwendet. Glücklicherweise hat Compass einige Helfer, um dies noch einfacher zu machen. Die Abstände werden durch Spaltenabstand und unteren Rand erzeugt.

Um einige echte Inhalte zu simulieren, verwenden wir in einer Schleife randomisierte Place Kittens.