CSS Grid布局问题：如何让Header、Banner、Footer全屏且内容居中1200px

要实现header、banner、footer全屏且内部内容居中（最大宽度1200px），同时保持主内容区的双栏布局，需要调整HTML结构和CSS规则，核心思路是将全屏元素从受限的container中剥离，单独控制其内部内容的宽度。

步骤1：调整HTML结构 #

将header、banner、footer从.container中移出，直接作为body的子元素，并在每个元素内部添加一个.inner容器来包裹内容，用于控制内容的最大宽度和居中：

<!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>My Space Blog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 全屏元素移到container外 -->
    <header id="header">
        <div class="inner">
            <a href="" class="logo"><img src="img/logo.png" alt="My Space Blog"></a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="banner">
        <div class="inner">
            <h1>My Space Blog</h1>
            <p class="subheading">
                Your go-to blog for all the latest news on space and interstellar activities.
            </p>    
        </div>
    </div><!-- end banner -->

    <div class="container">
        <div class="main-content">
            <main id="main" role="main">
                <article class="post-listing">
                    <h2>The Search for Extraterrestrial Intelligence</h2>
                    <img src="img/extraterrestial.jpg" alt="AI satellite to detect extraterrestial life">
                    <p>
                        For centuries, humans have looked to the stars and wondered if we are alone in the universe. 
                        The idea that there might be intelligent life beyond our planet has captivated our imaginations and fueled our curiosity.
                    </p>
                    <p>Scientists have been searching for signs of extraterrestrial intelligence for decades, using a variety of methods and 
                    technologies. One of the most well-known and controversial of these methods is the search for radio signals from other civilizations.</p>
                    <a href="blog-post.html" class="read-more">Read More</a>
                </article>
            </main>
            <aside id="sidebar">
                <h2>All Posts:</h2>
                <ul>
                    <li><a href="blog-post.html">The Search for Extraterrestrial Intelligence</a></li>
                    <li><a href="#">Exploring the Surface of Mars: The Mars Rover Missions</a></li>
                    <li><a href="#">The Search for Habitable Planets: Exoplanet Exploration</a></li>
                    <li><a href="#">The Future of Space Travel: Challenges and Opportunities</a></li>
                    <li><a href="#">From Sputnik to SpaceX: A Brief History of Spaceflight</a></li>
                </ul>
            </aside>
        </div><!-- end main-content -->
    </div><!-- end container -->

    <footer id="footer">
        <div class="inner">
            <p>&copy; 2023 All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>

步骤2：修改CSS规则 #

1. 为新增的.inner容器设置统一样式，控制内容居中且最大宽度1200px；
2. 调整全屏元素的样式，将原有的内边距转移到.inner上，确保背景全屏显示；
3. 更新.container的Grid布局，因为现在仅包含主内容区：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
@import 'layout.css';
@import 'responsive.css';
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}
.logo img{
    width: 100px;
    max-width: 100%;
    height: auto;
}
p {
    margin: 15px 0;
}
h1 {
    font-size: 2.5rem;
    color: #333;
}
h2 {
    font-size: 1.8rem;
    color: #333;
}
h3 {
    font-size: 1.3rem;
    color: #333;
}
a {
    color: #007acc;
}
a:hover {
    color: #00aaff;
}

/* 新增.inner容器样式 */
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

#header {
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
}
#header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px; /* 把原header的padding移到inner */
}
nav ul {
    display: flex;
    list-style: none;
}  
nav li {
    margin-right: 1rem;
}  
nav a {
    display: block;
    padding: 0.5rem;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
nav a:hover {
    background-color: #333;
    color: #fff;
}

.banner {
    background: #007acc;
    color: #FFF;
    width: 100%;
    padding: 30px 0; /* 上下padding保留在banner，左右padding移到inner */
    text-align: center;
}
.banner h1 {
    color: #FFF;
}
p.subheading {
    font-size: 20px;
}
.main-content {
    padding: 30px 15px;
}
.post-listing {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 30px 30px;
}
.post-listing h2 {
    margin-bottom: 15px;
}
a.read-more {
    display: block;
    width: 150px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 30px;
    font-size: 14px;
    background: #007acc;
    color: #FFF;
    text-align: center;
    line-height: 1.1;
    padding: 12px 30px;
    margin-top: 20px;
}
a.read-more:hover {
    background: #00aaff;
}
.social-share {
    margin-top: 30px;
}
.social-share ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.social-share li {
    display: inline-block;
    padding-right: 20px;
    font-size: 25px;
}
#sidebar {
    margin-top: 30px;
}
#sidebar ul {
  margin-left: 20px;   
}
#sidebar li {
    margin-top: 10px;
}
#footer {
    background: #333;
    color: #FFF;
    text-align: center;
    width: 100%;
    padding: 5px 0; /* 上下padding保留在footer，左右padding移到inner */
    margin-top: 30px;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "mc";
}

.main-content { 
    grid-area: mc;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "main"
    "sidebar";
}
#main {
    grid-area: main;
}
#sidebar {
    grid-area: sidebar;
}

@media (min-width: 900px) {
   .container {
       grid-template-columns: minmax(auto, 1200px);
       justify-content: center
    }
    .main-content { 
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
        "main main sidebar";
        grid-gap: 60px;
    }
    body {
        font-size: 18px;
    }
}

关键说明 #

• 全屏元素（header、banner、footer）直接作为body子元素，自然占据100%宽度，背景可以铺满屏幕；
• .inner容器统一控制内容的最大宽度1200px，通过margin:0 auto实现居中，同时保留左右内边距适配小屏幕；
• .container仅包裹主内容区，保持原有的Grid双栏布局逻辑，大屏时居中且最大宽度1200px，不影响全屏元素的显示。

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