← All CSS Chapters
LoOPCode Home
09. CSS Grid
2D layout — rows, columns, areas.
Is chapter me cover hoga:
display grid
grid-template-columns
gap
simple areas
1. Basic grid
Grid 2D hai — rows + columns ek saath.
<!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .cell { background: #3b82f6; color: white; padding: 24px; text-align: center; border-radius: 10px; font-weight: 600; } </style> </head> <body> <div class="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> </body> </html>
▶ Run Code
☐
Mark complete
← Flexbox
Responsive →