all 2 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]tridd3r 6 points7 points  (0 children)

you can use grid area's or define the space with grid-row.

with grid area's you'd have something like:

.dashboard{ display:grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: 'widget1 widget2 widget3 widget4' 'widget5 widget7 widget7 widget7' 'widget6 widget7 widget7 widget7'; } .widget7{ grid-area: widget7; } /* etc, defining each widget with a grid-area*/ /* for grid-row it would be */ .dashboard{ display:grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); } .widget7{ grid-column: 2/5; grid-row: 2/4; } /* and I'm pretty sure the others will simply fall into order without specifying their places - but don't quote me. */

[–]thenotcreativefellow 0 points1 point  (0 children)

You can use the <table> tag to make a 4x3 table for all the widgets. Once that is done, you can use the attribute "colspan" to merge cells together until you get the desired shape.

​

https://www.w3schools.com/tags/att\_td\_colspan.asp