Index: src/wp-includes/css/media-views.css
===================================================================
--- src/wp-includes/css/media-views.css	(revision 29199)
+++ src/wp-includes/css/media-views.css	(working copy)
@@ -683,7 +683,7 @@
  */
 .attachments {
 	margin: 0;
-	padding-right: 16px;
+	padding: 8px;
 	-webkit-overflow-scrolling: touch;
 }
 
@@ -705,16 +705,19 @@
 }
 
 .attachment:focus {
+	outline: none;
+}
+
+.attachment:focus .attachment-preview {
 	-webkit-box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 2px #5b9dd9;
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 2px #5b9dd9;
-	outline: none;
 }
 
-.selected.attachment {
+.selected.attachment .attachment-preview {
 	-webkit-box-shadow:
 		0 0 0 1px #fff,
 		0 0 0 3px #ccc;
@@ -725,8 +728,6 @@
 
 .attachment-preview {
 	position: relative;
-	width: 199px;
-	height: 199px;
 	-webkit-box-shadow:
 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@@ -904,7 +905,7 @@
 	display: block;
 }
 
-.attachment.details,
+.attachment.details .attachment-preview,
 .media-grid-view .selected.attachment {
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
@@ -1456,7 +1457,6 @@
 .media-selection .attachments {
 	display: inline-block;
 	height: 48px;
-	margin-top: 5px;
 	overflow: hidden;
 	vertical-align: top;
 }
@@ -2879,3 +2879,86 @@
 	}
 }
 
+/**/
+
+.attachments-browser .attachment {
+	position: relative;
+	width: 20%;
+	margin: 0;
+}
+
+.attachments-browser .attachment:before {
+	content: '';
+	display: block;
+	padding-top: 100%;
+}
+
+.attachments-browser .attachment .attachment-preview {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	bottom: 8px;
+	left: 8px;
+}
+
+.attachments-browser .portrait img {
+	max-width: 100%;
+}
+
+.attachments-browser .landscape img {
+	max-height: 100%;
+}
+
+/**/
+
+.media-selection .attachments {
+	padding: 5px;
+}
+
+.media-selection .attachment {
+	margin: 5px;
+	width: 40px;
+}
+
+.media-selection .attachment-preview,
+.media-selection .attachment-preview .thumbnail {
+	width: 40px;
+	height: 40px;
+}
+
+.media-selection .portrait .thumbnail img {
+	max-width: 40px;
+	height: auto;
+}
+
+.media-selection .landscape .thumbnail img {
+	width: auto;
+	max-height: 40px;
+}
+
+/* 2 per row for small screens. But we should hide the sidebar, so we can display more. I think 3/4 would be a good number. */
+@media only screen and ( max-width: 640px ) {
+	.attachments-browser .attachment {
+		width: 50%;
+	}
+}
+
+@media only screen and ( min-width: 640px ) and ( max-width: 960px ) {
+	.attachments-browser .attachment {
+		width: 33.3%%;
+	}
+}
+
+@media only screen and ( min-width: 960px ) and ( max-width: 1200px ) {
+	.attachments-browser .attachment {
+		width: 25%;
+	}
+}
+
+@media only screen and ( min-width: 1200px ) {
+	.attachments-browser .attachment {
+		width: 20%;
+	}
+}
+
+/* etc. etc. At a certain width we can stop, images will just get bigger... */
Index: src/wp-includes/js/media-views.js
===================================================================
--- src/wp-includes/js/media-views.js	(revision 29199)
+++ src/wp-includes/js/media-views.js	(working copy)
@@ -5149,7 +5149,7 @@
 
 			this.initSortable();
 
-			_.bindAll( this, 'css' );
+			/*_.bindAll( this, 'css' );
 			this.model.on( 'change:edge change:gutter', this.css, this );
 			this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
 			if ( this.options.resize ) {
@@ -5158,7 +5158,7 @@
 
 			// Call this.css() after this view has been rendered in the DOM so
 			// attachments get proper width applied.
-			_.defer( this.css, this );
+			_.defer( this.css, this );*/
 		},
 
 		dispose: function() {