Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> .container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; /* place-items property */ place-items: center start; /* Center vertically, start (left) horizontally */ height: 300px; border: 2px solid black; background-color: #f0f0f0; } .item { background-color: teal; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 30px; } </style> </head> <body> <h2>CSS place-items Property Example</h2> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </body> </html>