Fix grid layout trailing single item

src/components/Grid.tsx

@@ -0,0 +1,59 @@
+import {createContext, useContext,useMemo} from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, ViewStyleProp} from '#/alf'
+
+const Context = createContext({
+  gap: 0,
+})
+
+export function Row({
+  children,
+  gap = 0,
+  style,
+}: ViewStyleProp & {
+  children: React.ReactNode
+  gap?: number
+}) {
+  return (
+    <Context.Provider value={useMemo(() => ({gap}), [gap])}>
+      <View
+        style={[
+          a.flex_row,
+          a.flex_1,
+          {
+            marginLeft: -gap / 2,
+            marginRight: -gap / 2,
+          },
+          style,
+        ]}>
+        {children}
+      </View>
+    </Context.Provider>
+  )
+}
+
+export function Col({
+  children,
+  width = 1,
+  style,
+}: ViewStyleProp & {
+  children: React.ReactNode
+  width?: number
+}) {
+  const {gap} = useContext(Context)
+  return (
+    <View
+      style={[
+        a.flex_col,
+        {
+          paddingLeft: gap / 2,
+          paddingRight: gap / 2,
+          width: `${width * 100}%`,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}

src/components/feeds/PostFeedVideoGridRow.tsx

@@ -4,6 +4,7 @@ import {AppBskyEmbedVideo} from '@atproto/api'
 import {FeedPostSliceItem} from '#/state/queries/post-feed'
 import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {atoms as a, useGutters} from '#/alf'
+import * as Grid from '#/components/Grid'
 import {
   VideoPostCard,
   VideoPostCardPlaceholder,
@@ -33,15 +34,17 @@ export function PostFeedVideoGridRow({
   return (
     <View style={[gutters]}>
       <View style={[a.flex_row, a.gap_sm]}>
-        {posts.map(post => (
+        <Grid.Row gap={a.gap_sm.gap}>
-          <View key={post.post.uri} style={[a.flex_1]}>
+          {posts.map(post => (
-            <VideoPostCard
+            <Grid.Col key={post.post.uri} width={1 / 2}>
-              post={post.post}
+              <VideoPostCard
-              sourceContext={sourceContext}
+                post={post.post}
-              moderation={post.moderation}
+                sourceContext={sourceContext}
-            />
+                moderation={post.moderation}
-          </View>
+              />
-        ))}
+            </Grid.Col>
+          ))}
+        </Grid.Row>
       </View>
     </View>
   )