如何居中显示网格

Question

我在处理 display: grid 时遇到问题。我为此网站制作了一个响应式网格，将最大分辨率限制为只有 3 列，但是，当少于 3 列时，元素会被扔到角落，而不是居中。我该如何解决这个问题？

第二行少于三行。我希望当我得到的数量少于 3 时，它们都集中在中间而不是在左角

油漆印刷代表了我想做的事情

代码

反应

    <div className={classes["wrapper"]}>
      <div className={classes["candidatos"]}>
        <h1>Candidatos pendentes</h1>
        <div className={classes["pendentes"]}>
          {candidatos.map((candidato, index) => (
            <Candidato
              showButtons={true}
              key={index}
              index={index}
              candidato={candidato}
              onAceitar={aceitarHandle}
              onRecusar={recusarHandle}
            />
          ))}
        </div>
        <h1>Candidatos aceitos</h1>
        <div className={classes["aceitos"]}>
          {aceitos.map((candidato, index) => (
            <Candidato showButtons={false} key={index} candidato={candidato} />
          ))}
        </div>
        <h1>Candidatos recusados</h1>
        <div className={classes["recusados"]}>
          {recusados.map((candidato, index) => (
            <Candidato showButtons={false} key={index} candidato={candidato} />
          ))}
        </div>
      </div>
    </div>

SASS

.wrapper
  justify-content: center
  align-items: center
  display: flex
  flex-direction: column
  margin-bottom: 5rem

  h1
    color: #fff

.candidatos
  display: flex
  flex-direction: column
  align-items: center
  align-content: center
  width: 100%

  .pendentes, .aceitos, .recusados
    margin-bottom: 3rem
    display: grid
    gap: 2.5rem
    grid-template-columns: repeat(3, 1fr)

    @media (width <= 780px)
      grid-template-columns: repeat(1, 1fr)

    @media (780px < width <= 1150px)
      grid-template-columns: repeat(2, 1fr)

Answer 1

当网格项少于三列时，要使网格项居中，可以添加属性 justify-items: center;到你的网格容器。这会将项目水平对齐到网格单元的中心。您可以通过以下方式修改 SASS 代码来实现此目的：

.candidatos
  display: flex
  flex-direction: column
  align-items: center
  align-content: center
  width: 100%

  .pendentes, .aceitos, .recusados
    margin-bottom: 3rem
    display: grid
    gap: 2.5rem
    grid-template-columns: repeat(3, 1fr)
    justify-items: center; // Add this line to center items horizontally

    @media (max-width: 780px) // Use "max-width" instead of "<="
      grid-template-columns: repeat(1, 1fr)

    @media (min-width: 781px) and (max-width: 1150px) // Use "min-width" and "max-width" for the range
      grid-template-columns: repeat(2, 1fr)