CODEWITHSUNDEEP
csscss-grid
westernKid
westernKid

Reputation: 173

Puzzled by column span in CSS grid not working as expected

I am trying to build a layout with a full-width header, then two 150px wide ad blocks stacked vertically on the left, the main part in the center, then two more ad blocks stacked vertically on the right, with a full-width footer at the bottom.

The code I expected to work is 

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

but this makes the header fill just the left-most cell of the top row.

I can get it to work by adding 

header {
    grid-column: 1 / 4;
}

to force the header to span the whole width of the grid, but surely that shouldn't be needed? The use of grid-template-areas: "header header header" should achieve that without the use of grid-column shouldn't it?

Confused! Any help appreciated!

Upvotes: 0

Views: 456

Answers (1)

coreyward
coreyward

Reputation: 80140

You need to specify grid-area: header; on your header element. 

.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;
}
<div class="container">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>

  <div id="left_ad1">Left ad 1</div>
  <div id="left_ad2" class="ad">Left ad 2</div>
  <div id="right_ad1" class="ad">Right ad 1</div>
  <div id="right_ad2" class="ad">Right ad 2</div>
</div>

Upvotes: 2

Related Questions