Creating a web application means that you cannot assume any given display size. In fact, the user may change the browser's window size, and your application should somehow respond to that, rearranging whatever is shown on screen to better work with the current screen dimensions. If your web application is capable of this reorganization, it's said to be responsive. Today, given the extreme range of devices with browsers (ranging from small phone handsets to very large flat screens), doing responsive design is really a must, so in this section we'll see how to work with this. I'll assume you are already aware of CSS concepts such as grids and columnar designs; please read up on them if not.

To allay a common, fairly obvious question, if you are aware of current trends in CSS, you may ask why aren't we using Flexbox or CSS Grids, both of which easily allow responsive designs. The answer lies in availability: if you check places such as https://www.caniuse.com/, you'll find out that both those features are only recently available, and thus users may not yet have access to them. To sum it up, note the following:

• Internet Explorer has partial support of both features, with many bugs
• Edge supports them only since version 17, dated April 2018
• FireFox supports them since version 60, dated May 2018
• Safari supports them since version 11.1, dated March 2018
• Chrome supported FlexBox since version 49, from March 2016, but CSS Grid only since version 66, dated April 2018

As you can see, if you want to use these features, as of today (December 2018), only a few of your users may have access to them, and for the vast majority, scrambled up displays would be the result. So, even if it means working with a larger library than need be, we'll go with a current-day standard, as we'll see in the next section.