Cherry-pick add GridItem

Since this is duplicated from the original mobile gallery code (Tiles
component), it might make sense to export it for re-use. Previously, it
was only moved, but now that we will maintain both versions, it has
become a duplicate implementation. I will defer this to a later commit.

packages/block-editor/src/components/block-list/block-list-item.native.scss

@@ -10,3 +10,7 @@
 .fullAlignmentPadding {
 	padding: $block-edge-to-content;
 }
+
+.gridItem {
+	overflow: visible;
+}

packages/block-editor/src/components/block-list/grid-item.native.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block-list-item.scss';
+
+function Grid( props ) {
+	/**
+	 * Since we don't have `calc()`, we must calculate our spacings here in
+	 * order to preserve even spacing between tiles and equal width for tiles
+	 * in a given row.
+	 *
+	 * In order to ensure equal sizing of tile contents, we distribute the
+	 * spacing such that each tile has an equal "share" of the fixed spacing. To
+	 * keep the tiles properly aligned within their rows, we calculate the left
+	 * and right paddings based on the tile's relative position within the row.
+	 *
+	 * Note: we use padding instead of margins so that the fixed spacing is
+	 * included within the relative spacing (i.e. width percentage), and
+	 * wrapping behavior is preserved.
+	 *
+	 * - The left most tile in a row must have left padding of zero.
+	 * - The right most tile in a row must have a right padding of zero.
+	 *
+	 * The values of these left and right paddings are interpolated for tiles in
+	 * between. The right padding is complementary with the left padding of the
+	 * next tile (i.e. the right padding of [tile n] + the left padding of
+	 * [tile n + 1] will be equal for all tiles except the last one in a given
+	 * row).
+	 *
+	 */
+	const { numOfColumns, children, tileCount, index, maxWidth } = props;
+	const lastTile = tileCount - 1;
+	const lastRow = Math.floor( lastTile / numOfColumns );
+
+	const row = Math.floor( index / numOfColumns );
+	const rowLength =
+		row === lastRow ? ( lastTile % numOfColumns ) + 1 : numOfColumns;
+
+	return (
+		<View
+			style={ [
+				{
+					width: maxWidth / rowLength,
+				},
+				styles.gridItem,
+			] }
+		>
+			{ children }
+		</View>
+	);
+}
+
+export default Grid;