如何将Google自定义搜索结果以卡片布局并排展示？

要将Google自定义搜索（CSE）的结果改成卡片式并排布局，需要针对CSE生成的默认DOM结构添加CSS样式，核心是使用CSS Grid或Flexbox实现多列布局，同时给每个结果项添加卡片样式。以下是具体修改方案：

完整修改后的CSS代码 #

/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Kanit', sans-serif;
  padding: 2rem;
}

.header #title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #2d3748;
}

/* 覆盖CSE默认结果容器样式，实现自适应多列布局 */
.gsc-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* 单个搜索结果卡片样式 */
.gsc-webResult.gsc-result {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gsc-webResult.gsc-result:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* 调整结果内的图片容器 */
.gs-image-box {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.gs-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 调整标题样式 */
.gs-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.gs-title a {
  color: #2b6cb0 !important;
  text-decoration: none;
}

.gs-title a:hover {
  text-decoration: underline;
}

/* 调整摘要文本 */
.gs-snippet {
  color: #4a5568;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 调整分页样式 */
.gsc-cursor-box {
  margin-top: 2rem;
  text-align: center;
}

.gsc-cursor-page {
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin: 0 0.25rem;
  color: #2b6cb0;
  text-decoration: none;
}

.gsc-cursor-page:hover {
  background-color: #ebf8ff;
}

.gsc-cursor-current-page {
  background-color: #2b6cb0;
  color: white;
  border-color: #2b6cb0;
}

/* 结果信息文本 */
.gsc-result-info {
  font-family: 'Kanit', sans-serif;
  color: #4a5568;
  margin-bottom: 1rem;
}

关键说明 #

1. 自适应多列布局：通过.gsc-results的grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))实现，屏幕宽度足够时自动增加列数，小屏幕自动切换为单列。
2. 卡片样式美化：给每个.gsc-webResult添加边框、圆角、阴影和hover动效，让每个结果项呈现独立卡片形态。
3. 图片容器优化：固定图片容器高度，使用object-fit: cover保证图片比例正确且填充容器，避免拉伸变形。
4. 样式优先级处理：部分样式使用!important覆盖CSE默认样式（如标题链接颜色），确保自定义样式生效。
5. 响应式适配：网格布局自带响应式特性，无需额外媒体查询即可适配不同屏幕尺寸。

注意事项 #

• 确保CSS文件在CSE脚本之后加载，或使用更高优先级的选择器，避免自定义样式被CSE默认样式覆盖。
• 若某些样式未生效，可通过浏览器开发者工具查看CSE生成的DOM类名，调整选择器优先级。

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