如何创建两列CSS Grid并让元素宽度适配内容

需求说明 #

• 每行仅包含两个元素
• 元素宽度仅适配自身内容
• 元素整体在容器中居中

问题分析 #

你之前使用display: grid时元素占满网格宽度，核心原因是grid-template-columns: auto auto会让列尽可能拉伸，虽然外层flex容器的justify-content: center能让grid容器居中，但内部列的宽度控制逻辑需要调整。

解决方案一：Grid实现 #

调整网格列的宽度规则，让列宽完全适配内容，同时确保网格容器自身宽度贴合内部元素，即可实现需求效果。

修改后的代码 #

CSS

.container {
  display: flex;
  justify-content: center; /* 让网格容器整体在页面居中 */
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.grid {
  display: grid;
  grid-template-columns: fit-content(100%) fit-content(100%); /* 列宽完全适配内容 */
  gap: 8px; /* 可选：添加元素间距，提升视觉效果 */
}

.grid > * {
  border: 1px solid grey;
}

HTML

<div class="container">
  <ul class="grid">
    <li>Hello World</li>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum</li>
    <li>Dolor Set Amigo</li>
    <li>Some other placeholder</li>
  </ul>
</div>

解决方案二：Flex实现 #

如果偏好使用flex布局，也可以通过控制flex容器宽度、禁止元素拉伸来达成需求：

修改后的代码 #

CSS

.container {
  display: flex;
  justify-content: center; /* 让flex容器整体在页面居中 */
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: fit-content; /* 让flex容器宽度适配内部元素总宽度 */
  gap: 8px;
}

ul > li {
  flex: 0 0 auto; /* 禁止元素拉伸，宽度完全由内容决定 */
  border: 1px solid grey;
}

HTML

<div class="container">
  <ul>
    <li>Hello World</li>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum</li>
    <li>Dolor Set Amigo</li>
    <li>Some other placeholder</li>
  </ul>
</div>

关键逻辑说明 #

• Grid方案：grid-template-columns: fit-content(100%)让每一列的宽度刚好容纳自身内容，不会强制拉伸；外层flex的justify-content: center确保整个网格容器在页面水平居中。
• Flex方案：flex: 0 0 auto阻止li元素被拉伸，max-width: fit-content让ul容器宽度贴合内部元素的总宽度，再通过外层flex容器实现整体居中。

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