HTML/CSS网格布局优化：如何实现更简洁易读的网格设置？

你的原始布局思路可行，但存在大量重复代码，以下是更简洁的实现方式，同时保留原布局的视觉效果：

优化后的CSS代码 #

body {
  background-color: gainsboro;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  gap: 10px;
  /* 直接定义侧边栏和主内容的宽度比例，替代原3列布局 */
  grid-template-columns: 1fr 2fr;
}

.grid-item {
  background-color: darkseagreen;
  padding: 1rem; /* 增加内边距提升视觉体验 */
}

/* 用于头部、导航、页脚，占满所有列 */
.full-width {
  grid-column: 1 / -1;
}

优化后的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">
  <link rel="stylesheet" href="css/style.css">
  <title>CSS Grid Layout</title>
</head>
<body>
  <div class="wrapper">
    <header class="grid-item full-width">
      <h1>Header</h1>
    </header>

    <nav class="grid-item full-width">
      <p>LINK LINK LINK LINK LINK</p>
    </nav>

    <div class="grid-item">Image goes here</div>
    <div class="grid-item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga placeat quaerat dolore soluta distinctio earum totam dolorum reprehenderit nulla. Consectetur, fugiat. Excepturi praesentium molestias odio?
    </div>

    <div class="grid-item">Image goes here</div>
    <div class="grid-item">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt recusandae iure fugit molestiae earum nesciunt ex accusamus quas distinctio blanditiis!</p>
    </div>

    <div class="grid-item">Image goes here</div>
    <div class="grid-item">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo, ducimus.</p>
    </div>

    <div class="grid-item">Image goes here</div>
    <div class="grid-item">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim quae magni saepe voluptate repellendus ex modi nam exercitationem quisquam blanditiis. Facere mollitia voluptate, nobis explicabo nam fuga enim eos temporibus ipsum. Deserunt sunt voluptates facilis unde, cumque esse commodi quisquam illo dolores accusantium dolor, tenetur ad delectus quam incidunt amet cum maiores corporis quasi repellendus dicta! Aliquam, eum eaque fuga cupiditate dolores molestiae nam dicta, tempora earum dolorum id nemo.</p>
    </div>

    <footer class="grid-item full-width">
      <p>My Footer</p>
    </footer>
  </div>
</body>
</html>

关键优化点说明 #

• 简化网格结构：将原repeat(3, 1fr)改为1fr 2fr，直接匹配侧边栏占1份、主内容占2份的比例，无需依赖grid-template-areas的冗长声明。
• 消除冗余类：移除了side1/2/3/4、main1/2/3/4等重复类，所有网格项共用.grid-item，仅用.full-width处理需要跨列的元素。
• 语义化HTML：用<header>、<nav>、<footer>替代普通div，让结构更清晰，同时不影响布局效果。
• 优化基础样式：给body添加box-sizing: border-box避免padding撑宽页面，给网格项加内边距提升内容可读性。

如果需要给侧边栏或主内容添加单独样式，只需新增.sidebar-item或.main-content类即可，无需修改现有结构。

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