Payament
Free Photos
WordPress Themes

Introduction To CSS Grid

HTML
<div class="grid"> <!-- First Row --> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <!-- Second Row --> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> </div>
CSS
body { padding: 20px; background: #3498DB; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 1.5em; } .grid__item { width: 100%; height: 200px; background: #E5F5FF; box-shadow: 0 18px 30px 2px rgba(0,0,0,0.10); border-radius: 15px; }
JAVASCRIPT
Expand for more options Login