HTML Grid, how to define sections?-CodePudding

I have defined a grid with 9 cells using the property "display: grid".

Is there a way to define "sections" without destroying the layout, something like this?

.display33grid {
  display: grid;
  grid-template-columns: 102px 102px 102px;
  grid-template-rows: 52px 52px 52px;
}

<div >
  <div>
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
  </div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
  <div>Cell 7</div>
  <div>Cell 8</div>
  <div>Cell 9</div>
</div>

CodePudding user response：

You can make the first child of the grid span three columns, and make its children into a 3 column grid with the same dimensions as the parent grid.

That way the visual layout is the same as a straightforward grid, but the first three elements are grouped into their own 'section' (a div element in your code).

.display33grid {
  display: grid;
  grid-template-columns: 102px 102px 102px;
  grid-template-rows: 52px 52px 52px;
}

.display33grid>*:first-child {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: 102px 102px 102px;
}

<div >
  <div>
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
  </div>
  <div>Cell 4</div>
  <div>Cell 5</div>
  <div>Cell 6</div>
  <div>Cell 7</div>
  <div>Cell 8</div>
  <div>Cell 9</div>
</div>

CodePudding user response：

Have a look at this site, maybe this will work :

https://www.w3schools.com/css/css_grid.asp