RWD Grid View
What is a Grid-View?
Most websites use a grid layout, where the webpage is split into columns:
Grid-views are handy for creating web pages because they simplify the process of arranging elements on the page.
A responsive grid usually has 12 columns and takes up the whole width of the webpage, which is 100%. It adjusts in size as you make the browser window smaller or larger.
Building a Responsive Grid-View
Let's begin creating a grid that adjusts itself to different screen sizes.
To start, make sure that all HTML elements have their "box-sizing" property set to "border-box." This ensures that both the padding and border are counted as part of the element's overall width and height.
Please include this code in your CSS file:
* {
box-sizing: border-box;
}
You can learn more about the "box-sizing" property by visiting our CSS Box Sizing chapter at this link: CSS Box Sizing.
Here's an example of a basic web page that adjusts its layout to fit different screen sizes. This page has two columns.
The example is good if the webpage has only two columns.
Sure, we'd like to use a flexible grid layout with 12 columns to have better control over how our webpage looks.
To find the percentage for a single column, we divide 100% by 12 columns, which equals 8.33%.
We create a separate class for each of the 12 columns, using the "col-" class and a number to determine how many columns the section should cover.
All these columns should be on the left side and have 15 pixels of space around them.
We'd like to enhance its appearance with some stylish colors and designs.
Notice that the webpage in the example does not look good when you resize the browser window to a very small width.
In the next chapter you will learn how to fix that.
We also want to make it look nicer by adding some styles and colors:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.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%;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-3"> <img src="/assets/files/train.jpg" alt="TrainLights" style="height: 121px;"></div>
<!-- 25% -->
<div class="col-9">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</div>
<!-- 75% -->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.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%;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.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;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL