1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="grid">
<div class="grid-row">
<div class="box">1</div>
</div>
<div class="grid-row">
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="grid-row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="grid-row">
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
<div class="grid-row">
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
</div>
<div class="grid-row">
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
</div>
</div>
.grid {
width: 100%;
display: table;
border-collapse:separate;
border-spacing:15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Fira Sans', sans-serif;
text-align:center;
color: #fff;
}
.grid-row {
width: 100%;
display: table;
table-layout: fixed;
margin:0 0 -15px 0;
}
.box {
display: table-cell;
background: #3A73FC;
padding: 2%;
}
@media screen and (max-width: 480px) {
.grid-row {
display: block;
width: 100%;
margin:0;
}
.box {
display: block;
width: 100%;
margin: 0 0 5px 0;
}
}
