In this course, we will look at how to ensure that our website is suitable for all kinds of devices. We will take time to look at how to design a responsive web layout using @media rule.

The grid layout gave us a better way to create a responsive website. The flexbox layout is great but it has its limitations. In flexbox, items are laid out in one dimension. In a grid layout, items are laid in two dimensions. The grid layout permits items to be laid out in columns and rows. It also gives room for space in between, called gutters.

Flexbox (flexible box) is used to create a single-dimensional responsive webpage. Flexbox layout is one of the CSS layouts as has earlier stated. In this module, we shall discuss in simple terms, how to use the flexbox layout in our webpages.

The float property and the position property can also be used to alter the default block flow of HTML elements. In this section, we shall discuss the float property, the clear property, z-index property, and the position property.