<section class="grid-1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</section>
<span class="nope">🚫 Sorry, but CSS Grid is unsupported in your browser.</span>
body {
padding-top: 40px;
background: #f5f7f8;
}
.grid-1 {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: auto auto auto;
}
/* items */
.grid-1 div {
color: white;
font-size: 20px;
padding: 20px;
}
/* specific item styles */
.item-1 {
background: #b03532;
}
.item-2 {
background: #33a8a5;
}
.item-3 {
background: #30997a;
}
.item-4 {
background: #6a478f;
}
.item-5 {
background: #da6f2b;
}
.item-6 {
background: #3d8bb1;
}
.item-7 {
background: #e03f3f;
}
.item-8 {
background: #59a627;
}
.item-9 {
background: #4464a1;
}
/* warn against lack of browser support */
.nope {
display: block;
color: white;
background: orange;
text-align: center;
padding: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
@supports (display: grid) {
.nope {
display: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.