Home
CSS
CSS Grid Container
Tryit: Using align-content: space-around
Run ❯
Get your
own
website
Result Size:
625 x 534
×
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-around; } .grid-container > div { background-color: #f1f1f1; color:#000; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>The align-content Property</h1> <p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p> <p>With the value "space-around" the space between the grid lines are equal, but the space before the first grid item and after the last grid item is set to half of the space between the grid lines:</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>