Search code examples
htmlcsscss-griddashboard

Achieve multiple components in a dashboard home page using CSS grid layout

I am new to CSS Grid Layout.

Problems I am facing while trying to achieve following using css grids enter image description here

  1. Unable to achieve responsive design. (Responsiveness doesn't go well with different screen size ratios. Example 4:3 or 16:9)
  2. It is well known most of things doesn't go well when testing the application in Internet Explorer (Here I am talking about IE11) (Edit: Excluded, until IE supports CSS grid layout)
  3. It is a web tool dashboard, scroll bar should not appear in any condition while using in a full screen view.
  4. Restricted to use third party plug-in or poly-fills. (Because of commercial use)
  5. Restricted to use negative values in css properties.

(Edit: I know it can be achieved using media queries plus other CSS layout properties. Here I am trying to achieve this with minimal and cleaner code). Thanks

Solution
    1. When you use relative units it will resize according to your screen size. For different layouts you still need media queries
    2. CSS-grid is not fully supported by IE11. That usually isn't a problem as you should use a mobile-first approach anyways and mobile websites usually don't look bad on desktop anyways
    3. There is nothing special about the grid layout here. (If anything, it makes it easier: media queries + absolute units = magic) Either use media queries or overflow: hidden;
    4. Restricted to use third party plug-in or poly-fills. Ähm no? I don't understand what you mean
    5. Restricted to use negative values in css properties. Again, no, you're generally not? What's the problem here?