The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
Resize the browser window to see how the content respond to the resizing.
revision:
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.
Start with the fraction (fr) unit, a flexible unit that divides open space per your rules. Each fr declaration is a column; then you can add gaps and you have a grid.
<div>
<div class="grid1">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
<style>
* {box-sizing: border-box;}
.grid1 {display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-columns: calc((100vh - 3em) / 4); grid-auto-flow: column; grid-gap: 1em; height: 100vh;}
.grid-item:nth-child(3n) { background-color: red;}
.grid-item:nth-child(3n + 2) { background-color: orange;}
</style>
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
Resize the browser window to see how the content respond to the resizing.
<div>
<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>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
<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>
The example above is fine if the web page only contains two columns. However, we want to use a responsive grid-view with 12 columns, to have more control over the web page. First we must calculate the percentage for one column: 100% / 12 columns = 8.33%. Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
Resize the browser window to see how the content respond to the resizing.
<div>
<div class="header1">
<h1>Chania</h1>
</div>
<div class="row1">
<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>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="col-9">...</div> <!-- 75% -->
</div>
</div>
<style>
* {box-sizing: border-box;}
.header1 {border: 1px solid red; padding: 15px;}
.row1::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%;}
.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>