CSS Grid的justify-items属性未生效问题排查及代码优化咨询

云原生阿岚

2026-7-21

问题

我是CSS和HTML新手，想要通过Grid创建一个结果表单。在以下HTML和CSS代码中，我为.result类（.result__score与.result__summary元素的父容器）设置了justify-items: center样式，但该样式似乎未直接作用于.result__score元素。恳请您审查代码，指出疏漏或可改进之处，解释问题所在，并评估代码结构是否合理、是否需要优化。

CSS代码：

:root {
  /* Primary Color*/
  --clr--light-red: hsl(0, 100%, 67%);
  --clr--orangey-yellow: hsl(39, 100%, 56%);
  --clr--green-teal: hsl(166, 100%, 37%);
  --clr--cobalt-blue: hsl(234, 85%, 45%);

  /* Gradients Color */
  --clr--light-slate: hsl(252, 100%, 67%);
  --clr--royal-blue: hsl(241, 81%, 54%);
  --clr--violet-blue: hsla(256, 72%, 46%, 1);
  --clr--persian-blue: hsla(241, 72%, 46%, 0);

  /* Neutral Color */
  --clr-white: hsl(0, 0%, 100%);
  --clr-pale-blue: hsl(221, 100%, 96%);
  --clr-light-lavender: hsl(241, 100%, 89%);
  --clr-gray-blue: Dark gray blue: hsl(224, 30%, 27%);

 /* Fonts */

  --ff--base:'Fraunces', serif;
  
/* Font Weight */  
  --fw--regular: 500;
  --fw--bold: 700;
  --fw--extra-bold: 800;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    3. Allow percentage-based heights in the application
  */
html,
body {
  height: 100%;
}
/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

body{
    background-color: var(--clr-white);
    font-family: var(--ff--base);
    font-weight: var(--fw--regular);
}

.result{
    display: grid;
    justify-items: center;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Frontend Mentor | Results summary component</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" class="css" />
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <article class="result">
      <div class="result__score">
        <h1 class="result__header">Your Result</h1>
        <div class="flex-group">76 of 100</div>
        <p class="result__comment">Great</p>
        <p class="result__description">
          You scored higher than 65% of the people who have taken these tests.
        </p>
      </div>

      <div class="result__summary">
        <h1 class="result__summary_header">Summary</h1>
        <div class="result__performance">
          <p>Reaction 80 / 100</p>
          <p>Memory 92 / 100 Verbal</p>
          <p>61 / 100</p>
          <p>Visual 72 / 100</p>
        </div>
        <button class="button">Continue</button>
      </div>
    </article>

  </body>
</html>

分析与解决方案

一、`justify-items: center`未生效的核心原因

justify-items: center是Grid容器属性，作用是让子项在自身单元格内水平居中。但你的.result容器默认是单列网格（未定义grid-template-columns），.result__score和.result__summary会自动撑满整个列的宽度——子项宽度等于单元格宽度，此时居中操作没有多余空间可以体现，所以视觉上看不到效果。

二、代码疏漏与具体改进点

1. CSS变量语法错误

--clr-gray-blue的定义混入了描述文本，导致变量完全失效：

--clr-gray-blue: Dark gray blue: hsl(224, 30%, 27%);

修正为：

--clr-gray-blue: hsl(224, 30%, 27%);

2. Grid布局未定义目标结构

你要实现的是左右分栏的表单，需要给.result明确网格列规则，同时限制容器宽度并居中：

.result{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    max-width: 700px;
    margin: 2rem auto; /* 页面水平居中，留出上下间距 */
    border-radius: 2rem;
    overflow: hidden; /* 配合子项圆角实现整体圆角 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

如果要让子项内部内容居中，需给子项添加内容对齐样式：

.result__score, .result__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
}

此时justify-items: center可以移除，因为子项内容的居中已经通过flex实现。

3. 字体选择与结构优化

你引入的Fraunces是衬线字体，更适合标题，这类组件建议用无衬线字体（比如题目推荐的Hanken Grotesk），修改字体变量并替换链接：
```
--ff--base: 'Hanken Grotesk', sans-serif;
```
```
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet">
```

.result__performance内的p标签结构混乱，每个测试项应该用独立容器包裹，方便样式控制：

<div class="result__performance">
    <div class="performance-item">
        <span>Reaction</span>
        <span>80 / 100</span>
    </div>
    <div class="performance-item">
        <span>Memory</span>
        <span>92 / 100</span>
    </div>
    <div class="performance-item">
        <span>Verbal</span>
        <span>61 / 100</span>
    </div>
    <div class="performance-item">
        <span>Visual</span>
        <span>72 / 100</span>
    </div>
</div>

三、代码结构评估与优化建议

现有结构优点

采用了现代CSS重置方案，基础规范；
用CSS变量统一管理颜色、字体、权重，便于后续维护；
语义化标签使用合理，整体结构清晰。

优化方向

响应式适配：添加媒体查询，小屏幕下切换为单列布局：

@media (max-width: 600px) {
    .result{
        grid-template-columns: 1fr;
        margin: 0;
        border-radius: 0 0 2rem 2rem;
    }
}

样式复用：将.result__header和.result__summary_header改为通用类名（如.section-title），统一设置字体大小、权重等样式；

交互反馈：给按钮添加hover状态：

.button {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 2rem;
    background-color: var(--clr-gray-blue);
    color: var(--clr-white);
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: auto; /* 推至容器底部 */
}
.button:hover {
    background: linear-gradient(var(--clr--light-slate), var(--clr--royal-blue));
}

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

CSS Grid的justify-items属性未生效问题排查及代码优化咨询

一、justify-items: center未生效的核心原因 #

二、代码疏漏与具体改进点 #

1. CSS变量语法错误 #

2. Grid布局未定义目标结构 #

3. 字体选择与结构优化 #

三、代码结构评估与优化建议 #

现有结构优点 #

优化方向 #