css - CSS Grid 自动填充选定的列

Question

我只想自动填充第 2 列和第 3 列。我将制作一个 ES6 (javascript) map()。如您所见，段落/组件保留在同一列中。下面是反应代码，但基本上问题是 css。

我的CSS：

export const WrapperServices = styled.div`
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 2rem;
  align-items: center;
  justify-items: center;
  color: var(--white);
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 90%;
  width: 90%;
  max-width: 1280px;
  background: rgb(0, 0, 0, 0.5);
  border-radius: 0px;

  .first-column {
    grid-column: 1/2;
  }

  .second-and-third-column {
    // i dont no
  }
`
export const Service = styled.p`
  display: flex;
  justify-content: center;
  align-items: center;
`

我的 HTML（JSX）（使用反应样式的组件）：

<Wrapper>
      <StyledImg image={imageData}" />
      <WrapperServices>
      <span className="first-column">
              <h2>Defesa criminal</h2>
              <p>Conheça nossa atuação</p>
            </span>

            <span className="second-and-third-column">
              <Service>
                <GoLaw size="45" style={{ paddingRight: '10px' }} />
                {data.service1}
              </Service>

              // copy and paste <Service/> component 10 times for testing purpose.
            </span>
  </WrapperServices>
    </Wrapper>

标签： cssreactjscss-gridstyled-components

Answer 1

我找到了一个不太优雅的解决方案：

.first-column {
    grid-column: 1/2;
    grid-row-start: 1;
    grid-row-end: 6;
  }

并删除网格项目的跨度