I have a component which layout is given below,

我有一个组件，其布局如下所示，

const Faq = () => {
  return (
    <LandingWrapper>
      <CustomContainer>
        <CustomStackFullWidth spacing={5}>
          <SectionTitle item={staticTexts.landingPageTexts.faq} />
          <CustomBoxFullWidth>
            <Grid container spacing={3}>
              {faqData?.map((item, index) => (
                <Grid item xs={12} sm={6} key={index}>
                  <FaqItem data={item} />
                </Grid>
              ))}
            </Grid>
          </CustomBoxFullWidth>
        </CustomStackFullWidth>
      </CustomContainer>
    </LandingWrapper>
  );
};

Here FaqItem is a component consisting of a question and an answer. The problem is, when I expand the faqitem component, another grid with the item also gets the same height as the expanded grid. As a result, there shows unnecessary space to the grid beside the expanded grid. I want every grid should have only the size of its content. How to set these grid items, their individual content size?

在这里，FaqItem是一个由问题和答案组成的组件。问题是，当我展开faqItem组件时，包含该项的另一个网格的高度也与展开的网格相同。结果，在展开的栅格旁边，栅格显示了不必要的空间。我希望每个网格应该只有其内容的大小。如何设置这些网格项目，它们各自的内容大小？