CodeLab
Tutorials For Everyone
Run
<!DOCTYPE html> <html> <head> <style> /* ============== Inline-Grid Container ============== */ .grid-container-1, .grid-container-2, .grid-container-3 { display: inline-grid; } .grid-item { position: relative; background: #97ff99; border: 1px solid #333; text-align: center !important; padding: 10px !important; display: flex; justify-content: center; align-items: center; } /* ============== Inline-Grid Container ============== */ </style> </head> <body> <h1 class="heading">Inline-Grid Container</h1> <p class="description">An inline-grid based layout has a parent container that contains all grid items, this container is an inline elment, and is known as inline-grid container.</p> <div class="grid-container-1"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div> <div class="grid-container-2"> <div class="grid-item">a</div> <div class="grid-item">b</div> <div class="grid-item">c</div> </div> <div class="grid-container-3"> <div class="grid-item">x</div> <div class="grid-item">y</div> <div class="grid-item">z</div> </div> </body> </html>