Grid and Sub Grid
Home
Snippets
Grid and Sub Grid
HTML
CSS
JS
<body> <div class="container"> <div class="item">Item 1</div> <div class="item subgrid"> <div class="subitem">Subgrid Item 1</div> <div class="subitem">Subgrid Item 2</div> <div class="subitem">Subgrid Item 3</div> <div class="subitem">Subgrid Item 4</div> </div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> </body>
body { font-family: Arial, sans-serif; margin: 0; background: #f0f0f0; display: grid; place-items: center; height: 100vh; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .item { background: #3498db; color: #fff; padding: 20px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 18px; } .item.subgrid { display: grid; grid-column: span 2; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; padding: 10px; background: #2ecc71; } .subitem { background: #27ae60; color: #fff; padding: 10px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px; }
//javascript
Ad #1
Ad #2
Scroll to Top