Home
CSS
CSS Grid Container
Tryit: Using align-content: space-between
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> .container { display: grid; height: 300px; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 5px; gap: 5px; align-content: space-between; } .container div { background-color: #f1f1f1; color:#000; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>align-content: space-between</h1> <p>With <strong>align-content: space-between</strong> the space between the grid lines are equal, but the first grid item is flush with the start edge of the container, and the last grid item is flush with the end edge of the container:</p> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
