Home
CSS
CSS Grid Container
Tryit: Using align-content: space-between
Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; height: 400px; grid-template-columns: auto auto auto; gap: 10px; background-color: dodgerblue; padding: 10px; align-content: space-between; } .grid-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>The <em>align-content</em> property vertically aligns the grid inside the container.</p> <p>With the value "space-between" 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="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html>
