Super Simple Responsive CSS Grid

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;
	}  
}


Related Snippets