Introduction to layouts :

User Interface (UI) is the part of the website, which is responsible for interacting with the users. Depending on the number of items present on the page, used layout may be very simple or fairly complex. Moreover, making the UI usable on mobile devices is yet another challenge. In order to deal with all these issues, layouts utilize both absolutely positioned elements, as well as the flexible containers (Wiley 2013).

Browser Support :

Due to the fact that certain CSS3 properties may not be supported by all web browsers, vendor-specific prefixes should be added to the CSS properties:

Internet Explorer	-ms-prefix
Firefox	-moz- prefix
Opera	-o- prefix
Chrome & Safari	-webkit- prefix

Box Model :

When CSS’ specification was released, it introduced a simple box model. According to its specification, box’s content was surrounded by padding (internal margin), border and margin (external margin). Through styles applied to each of these elements, appearance of the box and its content could have been changed. Besides of that, two other concepts have to be considered: block-level and inline elements. Former are used to create the layouts (consisting of containers filled with content or other elements), while latter are used to operate on the text without breaking the document’s flow. Finally, parent-child relationship has to be addressed. In this concept, elements enclosed within a box (container) are its children and the container is theirs parent (Wiley 2013).

Unfortunately, CSS did not provide an easy way of aligning items vertically and horizontally until the flexbox and grid became available.

Flexbox :

Flexbox Box is a model based on flexible containers. It means that boxes and their content will be automatically adjusted to match the viewport’s dimensions. Flexbox is best suited to create simple navigation panels or control the content within the articles (Wiley 2013).
In order to use the flexbox, one has to set the container’s “display” property to either “flex” or “inline-flex” (w3schools.com 2018a). Styling of the content can be specified through following properties:

flex-direction	The flex-direction property defines in which direction the container wants to stack the flex items.
flex-wrap	The flex-wrap property specifies whether the flex items should wrap or not.
flex-flow	The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
justify-content	The justify-content property is used to align the flex items.
align-items	The align-items property is used to align the flex items vertically.
align-content	The align-content property is used to align the flex lines.

Grid:

Grid Layout, as the name suggests, is a technique used to develop layouts in which elements are positioned on the grid. Such approach provides great modularity and makes the grid one of the best tools when aligning different sections of the page (Wiley 2013).

Similarly, to grid seen in the spreadsheets, grid layout consists of rows and columns, which can be used to precisely allocate different components. In order to use grid, one has to set the container’s “display” property to either “grid” or “inline-grid” (Wiley 2013).