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;
}