Grid

300px
pタグ　Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nulla vitae elit libero, a pharetra augue.

400px

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus

200px

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.

300px

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui.

CSS
.box100 {
background:#16a085;
}
.box200 {
height: 200px;
background: #3498db;
}
.box300 {
height: 300px;
background:#e74c3c;
}
.box400 {
height: 400px;
background: #e67e22;
}
grid {
width:100%;
margin:0 auto;
display:block;
}
section {
width: 300px;
margin: 5px;
overflow: hidden;
}
section p{
padding: 10px;
margin: 1px 2px 2px;
font-size: 14px;
}