Web technologies have become powerful enough that they are used to build full-featured applications; this has been true for many years in the desktop and laptop computer realm, but is increasingly so on mobile devices as well.
By default, the box model in CSS specifies that any padding and border of an element are to be laid out and drawn outside of the specified width and height for the element. The effective external size of a box thus varies with the padding and border used, which complicates the design of responsive layouts where developers want to vary box sizes based on the size of the screen. The border-box value of the box-sizing property tells the user agent to lay out and draw padding and border inside the specified width and height for the element, which usually simplifies the design of responsive layouts.
CSS Flexbox and CSS Grid introduce two new layout modes, designed for laying out more complex applications. Notably, they make it possible to preserve a clear separation between the content itself (HTML, SVG) and its layout by allowing re-ordering of elements on screen, without having to change the underlying HTML. This is particularly relevant on mobile devices where the user interface and user experience need to be adjusted to fit the screen and available interaction mechanisms (see also Device Adaptation).