CSS RWD Grid view

A responsive webpage always uses grid layout structure, as it can be easily adapted to different screen sizes and devices. In this chapter we will discuss grid view in responsive web development and how to design a grid based responsive website.

What is Grid View?

In responsive web design, a grid view is a layout structure that uses a grid-based system to arrange layout elements in rows and columns. A typical grid-view may have 12 columns, and has a total width of 100%. The grid will shrink and expand as the size of the browser changes.

Building a Responsive Grid-View

• Set Border Box:First of all we need to setbox-sixingproperty as `border-box’ for all the elements in webpage. This will ensure padding and border are included in the total width and height of all elements. Use the following code to set:

* {

    box-sizing: border-box;

}

Set Width of Column:Next we have to decide how many columns are needed in our webpage layout. For Example we need a 3 column layout, for that width of one column will be 100% / 3 columns = 33.33%.

Use Media Queries:To ensure responsiveness, we have to usemedia queriesfor screen dependent stylings. With this we can add breakpoints for screen widths, at which layout need to be changed.

Grid Rows and Columns

In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.

Example

In this example we will create two grid layout one is for row and another one is for column, each grid has row and column.

Grid 12 Column Layout

The 12 column layout structure involve dividing the container into 12 equal-width columns, So that each individual elements can span across a specified number of columns to create different sections. Following image shows an example of 12 column layout.

Example

Following code shows example of designing a responsive 12 column layout. Run this in CodesCompilerHTML Compilerto see how layout changes with width.