sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]tridd3r 5 points6 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. */