A grid view is a layout system that organizes content on a webpage in a grid structure. The grid in its responsive form adapts to different screen sizes and devices.
A grid view involves dividing the webpage into a series of columns and rows. Each section of the grid can contain different elements such as images, text, and any other content. 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.
CSS RWD Grid view – Building
In order to build a grid view, one must make sure that all the HTML elements have the box-sizing property set to border-box. Setting of this property makes the padding and border are included in the total width and height of the elements. Use the following code snippet to set the box-sizing propert:
* {
box-sizing: border-box;
}
Add the above syntax to your CSS.
CSS RWD Grid view – Example
Refer the example below that demonstrates the responsive web page, in a grid view, with 2 columns:
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
* {
box-sizing: border-box;
}
.title {
border: 2px solid black;
padding: 10px;
background-color: blanchedalmond;
}
.grid-one {
width: 60%;
float: left;
padding: 10px;
border: 2px solid black;
background-color: darkseagreen;
}
.grid-two {
width: 40%;
float: left;
padding: 15px;
border: 2px solid black;
background-color: lightgreen;
}
</style></head><body><div class="title"><h1>Responsive Web Design</h1></div><div class="grid-two"><ul><li>Viewport</li><li>Grid view</li><li>Media queries</li><li>Images</li><li>Videos</li><li>Frameworks</li></ul></div><div class="grid-one"><h3>Grid view</h3><p>A grid view</b> is a layout system that organizes content on a webpage in a grid structure. The grid in its responsive form adapts to different screen sizes and devices.</p><p>Resize the browser window to see how the content gets responsive to the resizing.</p></div></body></html>
Leave a Reply