Plugins: Fix plugin card width calculation on the Add Plugins screen.

Replace the obsolete float-based layout with the flex container's `gap`, and remove the now-unnecessary `float`, `clear`, and `:nth-child` margin overrides. This eliminates the slight width discrepancy that left a gap on the right edge.

Developed in WordPress#10596.
Follow-up to r29047, r29219.

Props abdalsalaam, sabernhardt, westonruter.
See #28785.
Fixes #64355.


git-svn-id: https://develop.svn.wordpress.org/trunk@62446 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

src/wp-admin/css/list-tables.css

@@ -1474,6 +1474,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 .plugin-install-php #the-list {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 16px;
 }
 
 .plugin-install-php .plugin-card {
@@ -1505,9 +1506,6 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 }
 
 .plugin-card {
-	float: left;
-	margin: 0 8px 16px;
-	width: 48.5%;
 	width: calc( 50% - 8px );
 	background-color: #ffffff;
 	border: 1px solid rgb(0, 0, 0, 0.1);
@@ -1516,62 +1514,15 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 	overflow: hidden;
 }
 
-.plugin-card:nth-child(odd) {
-	clear: both;
-	margin-left: 0;
-}
-
-.plugin-card:nth-child(even) {
-	margin-right: 0;
-}
-
-@media screen and (min-width: 1600px) and ( max-width: 2299px ) {
+@media screen and (min-width: 1600px) {
 	.plugin-card {
-		width: 30%;
-		width: calc( 33.1% - 8px );
-	}
-
-	.plugin-card:nth-child(odd) {
-		clear: none;
-		margin-left: 8px;
-	}
-
-	.plugin-card:nth-child(even) {
-		margin-right: 8px;
-	}
-
-	.plugin-card:nth-child(3n+1) {
-		clear: both;
-		margin-left: 0;
-	}
-
-	.plugin-card:nth-child(3n) {
-		margin-right: 0;
+		width: calc( (100% - 32px) / 3 );
 	}
 }
 
 @media screen and (min-width: 2300px) {
 	.plugin-card {
-		width: 25%;
-		width: calc( 25% - 12px );
-	}
-
-	.plugin-card:nth-child(odd) {
-		clear: none;
-		margin-left: 8px;
-	}
-
-	.plugin-card:nth-child(even) {
-		margin-right: 8px;
-	}
-
-	.plugin-card:nth-child(4n+1) {
-		clear: both;
-		margin-left: 0;
-	}
-
-	.plugin-card:nth-child(4n) {
-		margin-right: 0;
+		width: calc( (100% - 48px) / 4 );
 	}
 }