Posts in current category

Responsive Web Design - Grid View


May 03, 2021 23:00 CSS


Table of contents


Responsive Web Design - Grid View


What is a grid view?

Many web pages are grid-based, which means that pages are laid out by column.

Responsive Web Design - Grid View

Using grid views helps us design web pages. This makes it easier for us to add elements to a Web page.

Responsive Web Design - Grid View

A responsive grid view is typically 12 columns, 100% wide, and automatically scales when the browser window is resized.

Responsive grid view


Create a responsive grid view

Let's create a responsive grid view.

First make sure that all HTML elements have a box-sizing property and are set to border-box.

Make sure that margins and borders are contained between the width and height of the element.

Add the following code:

* { box-sizing: border-box; }
* {
    box-sizing: border-box;
}

For more box-sizing content, click on: CSS3 box-sizing properties.

The following example demonstrates a simple responsive Web page with two columns:

.menu {
width: 25%;
float: left; }
.main {
width: 75%;
float: left; }

Try it out . . .

The above example contains two columns.

The 12-column grid system provides better control over responsive web pages.

First we can calculate the percentage of each column: 100% / 12 columns . . . 8.33%.

Specify class in each column, class" " col-" to define how many spans each column has:

Css:

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

Try it out . . .

All columns float to the left, with a pitch of 15px:

Css:

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red; }

Each line is wrapped with a .lt;div.gt. All columns should add up to 12:

< div class= "row" >
< div class= "col-3" > ... < /div >
< div class= "col-9" > ... < /div >
< /div >

The behavior in the column floats to the left, and adds a clear float:

Css:

.row:after {
content: "";
clear: both;
display: block; }

We can add some styles and colors to make them look better:

.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px; }
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color : #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.menu li:hover {
background-color: #0099cc; }

Try it out . . .