CSS网格最大宽度容器

dsekswqp 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(126)

我正在使用CSS Grid在大屏幕上创建一个响应式两列布局。目前我的代码运行良好，但我希望页眉，横幅和页脚部分是全宽的，其中的内容是居中宽度1200px宽度。目前整个容器框是1200px，但页眉，横幅和页脚没有扩展到页面的整个宽度。

@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;
}
#header {
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 15px;
}   
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;
    padding: 30px 15px;
    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;
    padding: 5px 15px;
    margin-top: 30px;
}
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "hd"
    "banner"
    "mc"
    "ft";
}

#header {
    grid-area: hd;
}
.banner {
    grid-area: banner;
}
.main-content { 
    grid-area: mc;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "main"
    "sidebar";
}
#main {
    grid-area: main;
}
#sidebar {
    grid-area: sidebar;
}
#footer {
    grid-area: ft;
}
@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;
    }
}

<!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>
    <div class="container">
        <header id="header">
            <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>
        </header>
        <div class="banner">
            <h1>My Space Blog</h1>
            <p class="subheading">
                Your go-to blog for all the latest news on space and interstellar activities.
            </p>    
         </div><!-- end banner -->

         <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 -->

        <footer id="footer">
            <p>&copy; 2023 All Rights Reserved.</p>
         </footer>
    </div><!-- end container -->
</body>
</html>

css

来源：https://stackoverflow.com/questions/75947207/css-grid-max-width-container

1条答案

按热度按时间

zaq34kh61#

如果你不能改变结构，这里有一个简单的代码更新：

.container {
  grid-template-areas: 
    "hd hd hd"
    ". banner ."
    ". mc ."
    "ft ft ft";
}

然后

@media (min-width: 900px) {
   .container {
       grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
   }
}

全码

@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;
}
#header {
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 15px;
}   
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;
    padding: 30px 15px;
    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;
    padding: 5px 15px;
    margin-top: 30px;
}
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "hd hd hd"
    ". banner ."
    ". mc ."
    "ft ft ft";
}

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

<!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>
    <div class="container">
        <header id="header">
            <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>
        </header>
        <div class="banner">
            <h1>My Space Blog</h1>
            <p class="subheading">
                Your go-to blog for all the latest news on space and interstellar activities.
            </p>    
         </div><!-- end banner -->

         <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 -->

        <footer id="footer">
            <p>&copy; 2023 All Rights Reserved.</p>
         </footer>
    </div><!-- end container -->
</body>
</html>

赞(0）回复(0）举报 2023-04-08

我来回答

CSS网格最大宽度容器

1条答案

相关问题

热门标签

最新问答