Have fun creating Grids!

Create & Export with Ease. Responsive, Interactive, and Versatile. Get Started Now!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    display: 'grid',
    gridTemplateRows: 'repeat(4, 1fr)',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: "2px",
  },
  item: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default function Home() {
  return (
    <View style={styles.container}>
      <Text key={1} style={styles.item}>Item 1</Text>
<Text key={2} style={styles.item}>Item 2</Text>
<Text key={3} style={styles.item}>Item 3</Text>
<Text key={4} style={styles.item}>Item 4</Text>
<Text key={5} style={styles.item}>Item 5</Text>
<Text key={6} style={styles.item}>Item 6</Text>
<Text key={7} style={styles.item}>Item 7</Text>
<Text key={8} style={styles.item}>Item 8</Text>
<Text key={9} style={styles.item}>Item 9</Text>
<Text key={10} style={styles.item}>Item 10</Text>
<Text key={11} style={styles.item}>Item 11</Text>
<Text key={12} style={styles.item}>Item 12</Text>
<Text key={13} style={styles.item}>Item 13</Text>
<Text key={14} style={styles.item}>Item 14</Text>
<Text key={15} style={styles.item}>Item 15</Text>
<Text key={16} style={styles.item}>Item 16</Text>
    </View>
  );
};