DEV Community

JWP
JWP

Posted on • Edited on

Display-Grid

#webcomponents

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>
Enter fullscreen mode Exit fullscreen mode

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

Grid Example

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); }
Enter fullscreen mode Exit fullscreen mode

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); } }
Enter fullscreen mode Exit fullscreen mode

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; } }
Enter fullscreen mode Exit fullscreen mode

Generated HTML

What's grid-col?

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

customElements.define( "grid-col", class extends HTMLElement { constructor() { super(); } } );
Enter fullscreen mode Exit fullscreen mode

How do I constrain the layout

Simply wrap display-grid with a div styled the way you want.
<div id="container">
<display-grid>
</div>

Top comments (0)