Introduction

In the recipes in this chapter, you will learn how to create a layout for your website or web application with Sass. The grid forms the basics of the layout. Grids help web designers and developers to work together and make deploying responsive layouts easier.

In the course of time, different ways to deploy layouts on the web saw the light. For years, tables have been (mis)used to build HTML layouts. Newer techniques leverage the CSS float to arrange elements. The CSS float property is a positioning property that keeps HTML elements in the flow of the document instead of applying a text wrap on it. Other layouts are built with the display property set to inline-block. HTML elements with the display property set to inline-block are positioned like lines of text. The Bootstrap CSS framework, as we will see in Chapter 12, Bootstrap and Sass, uses the float technique, but Bootstrap 4, as described in Chapter 12, Bootstrap and Sass, also ships with an opt-in, flexbox-based grid system...