Responsive Web Design Grid | responsive column
WhatisaGrid-View?Manywebpagesarebasedonagrid-view,whichmeansthatthepageisdividedintocolumns:Usingagrid-viewisveryhelpfulwhendesigningwebpages.Itmakesiteasiertoplaceelementsonthepage.Aresponsivegrid-viewoftenhas12columns,andhasatotalwidthof100%,andwillshrinkandexpandasyouresizethebrowserwindow.Example:ResponsiveGridView[1]BuildingaResponsiveGrid-ViewLetsstartbuildingaresponsivegrid-view.FirstensurethatallHTMLelementshavethebox-sizingpropertysettoborder-box.Thismakessurethatthepaddingandborder...
What is a Grid-View?Many web pages are based on a grid-view, which means that the page is divided into columns:
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
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.
Example: Responsive Grid View[1]
Building a Responsive Grid-ViewLets start building a responsive grid-view.
First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
Add the following code in your CSS:
* { box-sizing: border-box;}
Read more about the box-sizing property in our CSS Box Sizing[2] chapter.
The following example shows a simple responsive web page, with two columns:
Example.menu { width: 2...