Question

我正在尝试构建一个具有全角标题的布局，然后在左侧垂直堆叠两个150px宽的广告块，在中央放置主要部分，然后在右侧垂直堆叠两个其他的广告块，并用一个完整的底部的宽页脚。

我期望的代码是

.container {
    display: grid;
    grid-gap: 2px;
    background-color: black;
    padding: 2px;
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
    --nav-width: 250px;
}

.container {
  grid-template-columns: 150px 1fr 150px; /*Three columns - 150px for the ads; rest of screen for main */
  grid-template-rows: 200px 1fr 1fr 40px;
  grid-template-areas: 
    "header header header"
    "left_ad1 main right_ad1"
    "left_ad2 main right_ad2"
    "footer footer footer";
}



.header {
    background:PaleTurquoise;
}
.nav {
    background:LightPink;
}
.content {
    background:red;
}        
.footer {
    background:blue;
}  


div {
    font-size: 28px;
}

body {
    text-align: center;

}
.ad {
    height: 250px;
}

header {
    background: LightSalmon;
}

#left_ad1 {
    background:PaleTurquoise;
    grid-area: left_ad1;
}

#left_ad2 {
    background:PaleTurquoise;
    grid-area: left_ad2;
}         

#right_ad1 {
    background:LightPink;
    grid-area: right_ad1;
}

#right_ad2 {
    background:LightPink;
    grid-area: right_ad2;
}     

main {
    background-color: red;
    grid-area: main;
}

footer {
    background: LightSkyBlue;
    grid-area: footer;
}

<div class="container">

            <header>Header</header>

            <div id="left_ad1">Left ad 1</div>

            <main>Main</main>

            <div id="right_ad1" class="ad">Right ad 1</div>

            <div id="left_ad2" class="ad">Left ad 2</div>

            <div id="right_ad2" class="ad">Right ad 2</div>

            <footer>Footer</footer>

        </div>

但这会使标题仅填充第一行的最左侧单元格。

我可以通过添加

使它正常工作

header {
    grid-column: 1 / 4;
}

强制页眉跨越网格的整个宽度，但是肯定不需要吗？使用grid-template-areas: "header header header"应该可以在不使用grid-column的情况下实现这一点，不是吗？

困惑！任何帮助表示赞赏！

Answer 1

您需要在[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})元素上指定grid-area: header;。

header

.container {
    display: grid;
    grid-gap: 2px;
    background-color: black;
    padding: 2px;
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
    --nav-width: 250px;
}

.container {
  grid-template-columns: 150px 1fr 150px; /*Three columns - 150px for the ads; rest of screen for main */
  grid-template-rows: 200px 1fr 1fr 40px;
  grid-template-areas: 
    "header header header"
    "left_ad1 main right_ad1"
    "left_ad2 main right_ad2"
    "footer footer footer";
}

div {
    font-size: 28px;
}

body {
    text-align: center;

}
.ad {
    height: 250px;
}

header {
    background: LightSalmon;
    grid-area: header;
}

#left_ad1 {
    background:PaleTurquoise;
    grid-area: left_ad1;
}

#left_ad2 {
    background:PaleTurquoise;
    grid-area: left_ad2;
}         

#right_ad1 {
    background:LightPink;
    grid-area: right_ad1;
}

#right_ad2 {
    background:LightPink;
    grid-area: right_ad2;
}     

main {
    background-color: red;
    grid-area: main;
}

footer {
    background: LightSkyBlue;
    grid-area: footer;
}

对CSS网格中的列跨度感到困惑，无法按预期工作

1 个答案: