Author: Harish Rajora

Posted on

How Dynamic Rendering Works Using HTML and CSS?

Category Image 052

A user might be operating in front of a mobile screen and a desktop screen, but their expectation changes widely on both devices. A user in front of a mobile device is a little less patient, as they are mostly “on the go” compared to when they are in front of a desktop. Mobile devices have changed the overall user experience and how a user perceives a website nowadays. In short, we need our content to render dynamically on mobile and desktop screens abiding by their requirements. If we could do that, we could create a responsive design with content specific to the device users.

For example, you cannot hide a “Login” button on a dropdown or hamburger menu in the corner. While you can do that on a desktop screen (even though it’s a bad design!) and the user will find it. The developers cannot mess up with the mobile design, considering the traffic size and data generation a mobile device is responsible for. Also, we have a lot to share with our users on the developer's end and want a large screen space to accommodate everything.

Posted on

How CSS Subgrids Make Vertical Alignment Easy

Category Image 052

Do you know that both the grids and alignment CSS properties are always talked about together? Why? Because of the nature of their existence and the mess that alignment creates on different screen devices. How easy and convenient would web developers’ lives become if all the devices in this world existed with the same screen size. That would be a dream! But coming back to reality, we have to deal with hundreds of devices with varying screen sizes, and the problems they create for the developers with alignment is an add-on. CSS grids and CSS subgrids were introduced to tackle the alignment problem with multiple elements existing side by side.

Grids were responsive, and instead of the “hit and try” of pixel and margin values, setting display: grid worked like a charm. As time stands witness to the issues tackled by web developers, if they do not have one, they invent one themselves. Now the developers have started to create complex web designs with one grid nested with other grids. That was a makeshift arrangement, and making it work was an endeavor in itself.