如何用CSS使Grid容器内子元素默认同行显示（空间不足时换行）

问题描述 #

我需要让.card-container的所有子卡片（.card）默认显示在同一行，仅当容器空间不足时自动换行。尝试了几种方法都没达到预期：

• 设置grid-template-rows: 1fr;完全无效
• 设置grid-row:1;会在窗口缩小时导致内容溢出
• 使用repeat(auto-fit, minmax(10em, 1fr));只能缩小卡片宽度，无法实现换行需求

原代码 #

CSS #

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
  font-family: 'Ubuntu', sans-serif;
  text-transform: capitalize;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0;
}

.heading {
  text-align: center;
  font-size: 2.25em;
  padding: 1.25em 0;
  color: #00cc99;
}

.card-container {
  display: grid;
  /*repeat(auto-fit, minmax(10em, 1fr));*/
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 15px;
  padding: 20px;
}

.card-container .card {
  /* grid-row: 1; */
  /* width:%; */
  padding: 0.6em;
  border: 0.15em solid #00cc99;
  border-radius: 10px;
  text-align: center;
  background-color: white;
  box-shadow: 5px 5px #00cc99;
}

.card-container .card .card-icon {
  margin-top: 10px;
}

.card-container .card .card-icon i {
  margin: 10px 0;
  font-size: 1.5em;
  color: #00cc99;
}

.card-container .card .card-title {
  color: #00cc99;
  font-size: 1.125em;
  margin-top: 3px;
}

.card-container .card p {
  font-size: 0.8em;
  color: #555;
  padding: 10px;
}

.card-container .card a {
  color: #00cc99;
  text-decoration: none;
  display: block;
  font-size: 1.125em;
  padding: 10px 0px;
}

.card-container .card a:hover {
  color: #8d4cd6;
}

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Services</title>
  <script src="https://kit.fontawesome.com/364bf5035f.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1 class="heading">Our Services</h1>
  <div class="card-container">
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-code"></i>
      </div>
      <h3 class="card-title">web development</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <br><br>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-tools"></i>
      </div>
      <h3 class="card-title">web design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <br><br>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-brush"></i>
      </div>
      <h3 class="card-title">Animation</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <br><br>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-bullhorn"></i>
      </div>
      <h3 class="card-title">digital marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
  </div>
</body>

</html>

解决方案 #

首先要删掉HTML中卡片之间的<br><br>标签，这些标签会干扰布局逻辑，容器的间距应该用CSS统一控制。

方案1：使用Flex布局（推荐） #

Flex布局在这种流式换行场景下更简洁直接，修改.card-container和.card的CSS：

.card-container {
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  gap: 15px; /* 同时控制列间距和行间距，替代column-gap */
  padding: 20px;
}

.card-container .card {
  flex: 1 1 10em; /* 核心属性：基础宽度10em，空间足够时拉伸，不足时缩小到10em后换行 */
  /* 保留原有卡片样式 */
  padding: 0.6em;
  border: 0.15em solid #00cc99;
  border-radius: 10px;
  text-align: center;
  background-color: white;
  box-shadow: 5px 5px #00cc99;
}

• flex: 1 1 10em的含义：
  • flex-grow: 1：容器有剩余空间时，卡片会自动拉伸占满
  • flex-shrink: 1：容器空间不足时，卡片可以缩小
  • flex-basis: 10em：卡片的最小基础宽度，当容器总宽度小于所有卡片基础宽度之和时，自动换行

方案2：修正Grid布局写法 #

如果你坚持用Grid，只要去掉HTML中的<br>标签，然后用正确的auto-fit写法就能实现需求：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  gap: 15px;
  padding: 20px;
}

之前这个方法失效是因为<br>被当成了网格项，破坏了布局结构，删掉后就能正常实现默认同行、空间不足时换行的效果。

修改后的完整HTML（已移除<br>标签） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Services</title>
  <script src="https://kit.fontawesome.com/364bf5035f.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1 class="heading">Our Services</h1>
  <div class="card-container">
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-code"></i>
      </div>
      <h3 class="card-title">web development</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-tools"></i>
      </div>
      <h3 class="card-title">web design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-brush"></i>
      </div>
      <h3 class="card-title">Animation</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
    <div class="card">
      <div class="card-icon">
        <i class="fa-solid fa-bullhorn"></i>
      </div>
      <h3 class="card-title">digital marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
      <a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
    </div>
  </div>
</body>

</html>

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