Ich habe eine Seite, auf der es mehrere Grid-Boxen nebeneinander gibt. Nun habe ich in jede dieser Boxen einen Knopf eingefügt. Wie bekomme ich es hin, dass der Knopf in allen Boxen auf der gleichen Höhe sitzen. Ich habe es mal ein bisschen gezeichnet. Die kleinen Kästchen sollen die Knöpfe symbolisieren. Kann man die Knöpfe irgendwie unten anheften, ohne sie aus der Box zu schieben?
Knöpfe bei einem Grid auf gleiche Höhe bringen
-
Ja, das geht sehr gut mit Flexlayout, etwa so:
Code.container { display: flex; flex-direction: column; justify-content: space-between; } -
PS: Ich sehe gerade, dass es das auch beim Gridlayout gibt: align-self
https://css-tricks.com/snippets/css/complete-guide-grid/
Allerdings scheint dieses nur anwendbar zu sein, wenn es nur ein Item in der Zelle gibt.
Eine andere Möglichkeit könnte sein, eine weitere Zeile anzulegen mit den Knöpfen:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Gridlayout</title> <style> .container { display: grid; grid-template-columns: 33.33% 33.3% 33.3%; grid-template-rows: 1fr auto; } </style> </head> <body> <div class="container"> <div id="e1">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.</div> <div id="e2">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.</div> <div id="e3">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.</div> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div> </body> </html>Mit Flex geht es aber auf jeden Fall.
-
Vielen Dank! Hat alles geklappt.
-
Und welche Variante hast Du jetzt genommen, die mit einer weiteren Zeile oder die mit Flex?
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!