如何在React Native中正确创建等间距双列网格？

问题重现 #

我尝试用CSS Flex和FlatList实现一个可滚动双列列表，但遇到了不少问题：盒子宽度无法对齐、文本容易换行，数据库表结构如下：

需求是：双列布局、文本不换行（超长时自动省略）、所有卡片对齐一致，求正确实现方法。（参考样式：双列列表参考图）

解决方案 #

一、React Native 场景（用FlatList）

FlatList本身支持双列布局，不用手动计算宽度，直接配置即可：

1. FlatList 基础配置

<FlatList
  data={你的数据数组}
  numColumns={2} // 直接指定双列布局
  keyExtractor={item => item.id.toString()}
  renderItem={({ item }) => <Card item={item} />}
  contentContainerStyle={{ padding: 8, gap: 8 }} // 控制列表内间距
/>

2. 卡片样式确保对齐
   给卡片设置flex:1让它自动均分每列宽度，同时处理文本不换行：

const Card = ({ item }) => (
  <View style={styles.card}>
    <Image
      source={{ uri: item.pic }}
      style={styles.image}
      resizeMode="cover"
    />
    <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
      {item.title}
    </Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    flex: 1, // 关键：强制卡片占满当前列的宽度
    marginBottom: 8,
    backgroundColor: '#fff',
    borderRadius: 8,
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: 120, // 固定图片高度，保证所有卡片垂直对齐
  },
  title: {
    padding: 8,
    fontSize: 14,
    fontWeight: '500',
    whiteSpace: 'nowrap', // 强制文本不换行
    overflow: 'hidden',
    textOverflow: 'ellipsis', // 超长文本自动省略
    fontFamily: 'System', // 统一字体，避免设备默认字体差异
    lineHeight: 20, // 固定行高，防止文本高度不一致
  },
});

无需手动计算“安全文本长度”，numberOfLines={1}+省略模式就能搞定文本不换行的需求。

二、Web 场景（推荐CSS Grid）

Web端用Grid比Flex更适合等分布局，代码更简洁易维护：

1. 容器布局

.list-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 自动均分双列宽度 */
  gap: 12px;
  padding: 12px;
  max-width: 800px;
  margin: 0 auto;
}

2. 卡片样式

.card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.card img {
  width: 100%;
  height: 150px;
  object-fit: cover; /* 图片自适应比例，避免变形 */
}
.card-title {
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Arial', sans-serif; /* 统一字体 */
}

如果非要用Flex，给卡片设置flex: 0 0 calc(50% - 6px)（减去gap的一半），容器添加flex-wrap: wrap，但Grid的布局稳定性更好。

常见问题修复

• 盒子宽度不一致：不要给卡片设置固定宽度，用flex:1（RN）或1fr（Grid）让容器自动分配宽度，同时确保内部元素（如图片）用width:100%撑满，文本设置overflow:hidden。
• 文本换行：用white-space: nowrap+text-overflow: ellipsis（Web）或numberOfLines={1}（RN），自动处理超长文本，无需手动计算长度。
• 字体差异：明确指定字体族、大小、行高，避免不同设备/浏览器的默认字体导致的布局偏移。

内容的提问来源于stack exchange，提问作者Trinity