Gridster.js - Responsive Layout
This demo represents a similar layout to a project I was the lead on while working for the State of Georgia, see below.
If you resize your browser you will see it stretches to fit different sizes automatically.
You can also drag and drop sections, and resize each widget individually.
Surveillance Dashboard - details on how I built it...
Created advanced Reports Console Widgets App dashboard used to display (CSS Flex) Disaster Reports (horizontal and vertical layout) designed to run inside an Oracle Procedure. Uses Angular 9.1.7, Gridster 9.0.0, Composer 2.5.1, Node 12.16.1, Express framework, Node/Express Postgres RESTful API, JavaScript (Select.js, ElementQueries.js, ResizeSensor.js, Chosen.jquery.js, Canvas.js, amCharts dataloader.js, ES6 and Vanilla), jQuery 1.11.1, jQuery 3.5.1, Typescript 3.8.3, Karma 5.0.0, Jasmine 3.5.0, HTML5, CSS3 and Chosen.css, and Font Awesome. The app displays syndromic data from a CSV file and outputs to a web browser. Features custom master controls of layout. Uses Gridster (dsmorse.github.io/gridster) to display data in containers/widgets, which can be dragged and dropped dynamically, along with the ability to add/remove elements from the grid. Within each container/widget (using iFrames) is a database connection that displays data based upon dropdown choices. Each widget contains a report viewer, and widgets (up to 12) can be moved around and positioned freely, with or without data inside them due to the Angular setup.