Display-Grid

Is there a way we can automatically utilize the grid css component but do it using only 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.

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

Defining the Web Component

customElements definition and the class with constructor:

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

Dynamically Setting the Style

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

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

What's grid-col?

A simple definition of a new Web Element name. Nothing else.

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.
<div id="container">
<display-grid>
</div>