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>
Top comments (0)