效果如下：
html代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通用布局</title><link rel="stylesheet" href="style.css">
</head>
<body><header class="top-bar"></header><aside class="sidebar"></aside><main class="main-content"></main>
</body>
</html>
CSS代码：
:root{/* 存放变量用的 */--sidebar-width:24rem;--top-bar-height:6rem;--color-main-content:#0d0e12;--color-top-bar:#1a1b20;--color-sidebar:#1f2026;
}*{/* 初始化页面所有元素，让所有元素使用这个样式 */margin:0;padding:0;box-sizing:border-box;
}html{/* 根元素，定义样式基准，其他元素可用此样式也可以不用 */font-size: 62.5%;
}body{/* 页面大小，以及区域划分 */height:100dvh;display:grid;grid-template-columns: var(--sidebar-width) 1fr;grid-template-rows: var(--top-bar-height) 1fr;grid-template-areas: "sidebar top-bar""sidebar main-content";
}.top-bar{/* 顶部导航 */grid-area:top-bar;background-color: var(--color-top-bar);
}.sidebar{/* 侧边栏 */grid-area:sidebar;background-color: var(--color-sidebar);
}.main-content{/* 主内容区 */grid-area:main-content;background-color: var(--color-main-content);
}
