CODEWITHSUNDEEP
htmlcss
Urthona26
Urthona26

Reputation: 109

My CSS grid element won't extend across multiple columns

I can't get my div element to span multiple columns in the CSS grid. What have I done wrong?

.main {
          display: grid;
          grid-template-areas: "a b"
                               "c c";
          grid-template-rows: 100px 100px;
          grid-template-columns: 200px 150px;
          }
<body>
  <div class="main">
  <div id=a>
    <p>
      This is the content of box A.
    </p>
  </div>
  <div id=b>
    <p>
      This is the content of box B.
    </p>
  </div>
  <div id=c>
    <p>
      This is the content of box C.
    </p>
  </div>
  </div>
</body>

Here is an image of the output of the above code.:

Here is an image of the output of the above code.

Upvotes: 0

Views: 518

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4415

You need to specify the grid area an element belongs to explicitly.

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }

Upvotes: 1

Related Questions