You have so far learnt about the various fundamentals of CSS which helps in styling text and the boxes that contain the content. In this chapter we will learn how to arrange and adjust these boxes in relation to the viewport.

Prerequisites

In order to proceed with learning of CSS layout, certain prequisites are essential, such as:

• Having a basic knowledge of HTML.

• Basic idea of the CSS fundamentals.

• Understanding of how to style the boxes.

The chapter will list fundamental tools and techniques available for CSS layout. Let us look at each topic.

CSS Layout – Normal flow

This section explains about the normal flow of a webpage, where the elements position or lay themselves as per this flow. The normal flow is the basic ground for any changes that you intend to do.

A box model is applied to the individual elements, where padding, border, or margin are added to the content. A block-level element fills the available inline space of the parent element with its content, by default; whereas an inline-level element”s size is same as its content”s size. For the elements that have a display value of inline, you can set the width or height

In the normal layout flow, the block-level elements are positioned in the block flow direction, which is as per the parent”s writing mode. Each block-level element will appear in a new line below the last line, separated by the specified margin.

The inline-level elements do not appear on a new line, rather they appear in the same line along with other text content, till the time they have space to be inside the width of the parent block level element. When there is no space left, then the content will fall into a new line.

CSS Layout – Flexbox

Laying out of elements in rows and columns, in a one-dimensional space, is taken care by the flexbox layout. In this layout the items or elements flex in order to fill the space and at the same time they may shrink to fit in the smaller spaces.

CSS Layout – Grids

Layout system of positioning elements in a two-dimensional space, is the responsibility of the grid layout. It helps in laying the content in rows and columns and make the whole building complex layout easy.

CSS Layout – Floats

CSS float is one of the commonly used property to create multiple column layouts on webpages, apart from using it to float images inside a container. But with flexbox and grid features, the float is restricted for the usage of floating images or text.

CSS Layout – Positioning

Positioning is a feature that determines the position or placement of elements on a webpage, which can be fixed or relative to a viewport.

CSS Layout – Multiple-column layout

This layout lets you lay the content in different columns, just like a newspaper.

CSS Layout – Responsive design

With the advance in the various devices, the screens are available in diverse sizes. The responsive web design (RWD) is helpful in allowing web pages to adjust their layout and display as per the different screen sizes, with varying widths and resolutions.

CSS Layout – Media queries

The Media Query provided by CSS are essential as they help in creation of different layouts based on the size of the viewport. A rule is specified via a media query and as the browser and device environment matches the rule, certain CSS gets applied. The media queries are also helpful in detecting other features of the environment, where your site is running.