HTML elements do not span grid template areas properly (they span only one cell)

Question

It is my first attempt us use responsive design using grid templates, following some example code I found. However my elements just use one grid cell, even if multiple contiguous cells use the same name.

Consider this primitive test (derived from the real code):

<html>
  <head>
    <title>Test</title>
    <style>
@media screen {
    .grid-1 {                           /* main grid */
        display: grid;
        grid-template-areas:
        'main main'
        'opt1 opt2'
        'opt3 opt3'
        'subm ...';
        gap: 10px;
    }

    .grid-1 * {
        /* adjust box sizing */
        margin: 0;
        box-sizing: border-box;
        background-color: #ccc;
    }
}

@media screen and (width < 60rem) {
    .grid-1 {
        grid-template-areas:
        'main main'
        'opt1 opt1'
        'opt2 opt2'
        'opt3 opt3'
        'subm ...';
    }
}
    </style>
  </head>
  <body>
    <div class="grid-1">
      <span grid-area="main">Main</span>
      <span grid-area="opt1">Options 1</span>
      <span grid-area="opt2">Options 2</span>
      <span grid-area="opt3">Options 3</span>
      <span grid-area="subm">Submit</span>
    </div>
  </body>
</html>

Debugging in Firefox the grid is shown like this (I added the background color in CSS for illustration after having made the screenshot):

(in the original code the <div> is a <form>, and the <span>s are `s)

Also note that adding more text into the elements does not change the assignment to grid cells.

Probably some beginner's mistake, but I don't get it.

deepakrajbhar · Accepted Answer · 2025-05-12 10:58:27Z

1

The issue is that you're using grid-area as an HTML attribute on your elements, but that's not valid HTML and doesn't affect layout. grid-area should be set as a CSS property in your stylesheet, not as an HTML attribute.

Update your HTML to use classes instead, like this:

<div class="grid-1">
  <span class="main">Main</span>
  <span class="opt1">Options 1</span>
  <span class="opt2">Options 2</span>
  <span class="opt3">Options 3</span>
  <span class="subm">Submit</span>
</div>

Then, in your CSS, assign each class to a grid area:

.main { grid-area: main; }
.opt1 { grid-area: opt1; }
.opt2 { grid-area: opt2; }
.opt3 { grid-area: opt3; }
.subm { grid-area: subm; }

Now the elements will correctly span across the grid areas defined in your grid-template-areas.

answered May 12 at 10:58

deepakrajbhar

4491 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

U. Windl May 12 at 11:37

It's a bit counter-intuitive that you cannot "style directly", but have to use indirect styling via CSS IMHO.

Ori Drori · Accepted Answer · 2025-05-12 10:53:39Z

The grid-area is a CSS property, and not an attribute. You can add it to your CSS or inline it (like the example) via the "style" attribute:

@media screen {
  .grid-1 {
    /* main grid */
    display: grid;
    grid-template-areas:
      'main main'
      'opt1 opt2'
      'opt3 opt3'
      'subm ...';
    gap: 10px;
  }

  .grid-1 * {
    /* adjust box sizing */
    margin: 0;
    box-sizing: border-box;
    background-color: #ccc;
  }
}

@media screen and (width < 60rem) {
  .grid-1 {
    grid-template-areas:
      'main main'
      'opt1 opt1'
      'opt2 opt2'
      'opt3 opt3'
      'subm ...';
  }
}

<div class="grid-1">
  <span style="grid-area: main">Main</span>
  <span style="grid-area: opt1">Options 1</span>
  <span style="grid-area: opt2">Options 2</span>
  <span style="grid-area: opt3">Options 3</span>
  <span style="grid-area: subm">Submit</span>
</div>

Collectives™ on Stack Overflow

HTML elements do not span grid template areas properly (they span only one cell)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related