May 03, 2021 CSS
Many web pages are grid-based, which means that pages are laid out by column.
Using grid views helps us design web pages. This makes it easier for us to add elements to a Web page.
A responsive grid view is typically 12 columns, 100% wide, and automatically scales when the browser window is resized.
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:
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:
All columns float to the left, with a pitch of 15px:
Each line is wrapped with a .lt;div.gt. All columns should add up to 12:
The behavior in the column floats to the left, and adds a clear float:
We can add some styles and colors to make them look better: