Display-Grid
Tags: webcomponents
Published: 2022-12-29 23:41:58

Is there a way we can automatically utilize the [grid](https://css-tricks.com/snippets/css/complete-guide-grid/) css component but do it using only HTML?

```html
    <display-grid>  
        <grid-col>Column a
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum inventore earum illo ipsam perferendis, totam, fugiat consectetur fugit consequatur id dolore alias autem expedita aliquid unde ea? Illo, facere animi!</p>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Using Grid Layout</a>
        </grid-col>     
        <grid-col>Column b
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi quia explicabo earum delectus sequi ex, facilis, incidunt harum quas impedit repellendus in error ullam illo deleniti ab enim, temporibus vero?</p>
        </grid-col>
        <grid-col>Column c
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit reiciendis laudantium ullam nam cumque laborum consectetur provident deleniti adipisci praesentium officiis quod sint commodi repudiandae sapiente, aperiam tenetur velit. Qui!</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque tempore, id corporis nisi mollitia saepe distinctio eius quia adipisci quas porro est nobis, vero molestias. Itaque mollitia at nulla incidunt.</p>
        </grid-col>     
    </display-grid>

```
The HTML above is saying "Display a Grid" and these are the grid columns.

![Grid Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxesm6it449cg1eoghpw.png)

The CSS is dynamically generated which makes thing seem to work well. 

###Defining the Web Component###

customElements definition and the class with constructor:

```js
customElements.define(
  "display-grid",
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
      this.SetStyleByColumns(shadowRoot);
    }
```

###Dynamically Setting the Style###

```js
    /**Based on the number of grid-col elements set up the grid column count to match */
    SetStyleByColumns(shadowRoot) {
      let cols = document.querySelectorAll("grid-col");
      var numberOfColumns = this.GetNumberOfGridColumnsToAdd(cols);
      var style = `
       display:grid; grid-template-columns:${numberOfColumns};
     `;
     const div = document.createElement("div");
     div.setAttribute("style", style);
     shadowRoot.appendChild(div);
      for (let col of cols) {
        var text = col.textContent;
        div.appendChild(col);
      }
    }

```
 Get the proper number of Auto strings to add...

```js
    GetNumberOfGridColumnsToAdd(cols) {
      var AutoCount;
      cols.forEach((item) => {
        if (AutoCount == undefined) {
          AutoCount = "auto ";
          return;
        }
        AutoCount += "auto ";
      });
      return AutoCount;
    }
  }
```
 

![Generated HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3m04vxmb9q40h4q56u0.png)

###What's grid-col?###
A simple definition of a new Web Element name.  Nothing else.
```js
customElements.define(
  "grid-col",
  class extends HTMLElement {
    constructor() {
      super();
    }
  }
);
```
###How do I constrain the layout###
Simply wrap display-grid with a div styled the way you want.<code>
&lt;div id="container"&gt;
&lt;display-grid&gt; 
&lt;/div&gt;
</code>