Live
x
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Grid</title> <style> body { font-family: sans-serif; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 600px; margin: 20px 0; } /* Siatka o równej wysokości wierszy, ale uciętych zawartościach: */ .grid.even { grid-auto-rows: 120px; } /* Siatka o równej wysokości wierszy, ale z opcją na zwiększenie wysokości gdy będzie taka potrzeba: */ .grid.even.auto { grid-auto-rows: minmax(120px, auto); } .grid div { background: lightskyblue; padding: 20px; text-align: center; } .grid div:nth-child(even) { background: goldenrod; } </style> </head> <body> <h1>CSS Grid</h1> <pre>1. Różne wysokości wierszy: </pre> <div class="grid"> <div>Quibusdam vitae autem enim.</div> <div>Quibusdam vitae autem enim..</div> <div>Quibusdam vitae autem enim quas.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div> Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. </div> <div>Quibusdam.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> </div> <pre>2. Równe wysokości wierszy, ale możliwe ucięcie zawartości: </pre> <div class="grid even"> <div>Quibusdam vitae autem enim.</div> <div>Quibusdam vitae autem enim..</div> <div>Quibusdam vitae autem enim quas.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div> Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. </div> <div>Quibusdam.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> </div> <pre>3. Równe wysokości wierszy, ale możliwe zwiększenie wyskości wiersza, aby zmieścić jego całą zawartość: </pre > <div class="grid even auto"> <div>Quibusdam vitae autem enim.</div> <div>Quibusdam vitae autem enim..</div> <div>Quibusdam vitae autem enim quas.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div> Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil. </div> <div>Quibusdam.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> <div>Quibusdam vitae autem enim quas eum magnam consequatur possimus nihil.</div> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.