RWD Grid View

RWD Grid-view means that the page is divided into columns. RWD Grid view adapts to screen size and orientation, ensuring consistency across layouts. A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

RWD Grid View-concept

Lets create a responsive grid-view with 12 columns, to have more control over the web page. Calculate the percentage for one column: 100% / 12 columns = 8.33%. Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span


[class*="col-"] {
  float: right;
  padding: 25px;
  border: 3px solid red;

The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size.

Grid View Style

Lets add some styles and colors to make it look better:


.header {
  background-color: violet;
  color: white;
  padding: 25px;

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;