Implementing a layout using grid alignment
Creating a grid layout
The grid layout capability provides a way to lay out the content of the web page much like an HTML table but using only CSS to achieve the results.
The grid layout is fully defined in CSS by specifying the display properties for a container.
The following code creates a simple four-by-two grid layout:
<head>
<style type="text/css">
#mainGrid {
border:1px solid #000000;
display: -ms-grid;
/* four columns */
-ms-grid-columns: 150px 150px 150px 150px;
/* two rows */
-ms-grid-rows: 75px 75px;
}
</style>
</head>
<body>
<div id="mainGrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Using the grid-columns and the grid-rows
The grid-columns property allows you to specify how many columns are in your grid. The grid-rows property allows you to specify how many rows are in your grid.
The following code applies some style to demonstrate the grid-columns and the grid-rows:
<head>
<style type="text/css">
#mainGrid {
border:1px solid #000000;
display: -ms-grid;
-ms-grid-columns: 150px 150px 150px 150px;
-ms-grid-rows: 75px 75px;
}
#mainGrid > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
background-color: blue;
}
#mainGrid > div:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
background-color: aqua;
}
#mainGrid > div:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
background-color: red;
}
#mainGrid > div:nth-child(4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
background-color: green;
}
</style>
</head>
<body>
<div id="mainGrid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Using the grid-column-span and the grid-row-span
The grid-column-span and the grid-row-span gives the same result as the colspan and the rowspan when applied respectively to a table column and row.
The following code demonstrates the grid-column-span and the grid-row-span properties:
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100% ;
}
#blogPage {
display: -ms-grid;
-ms-grid-columns: 15% 1fr 25%;
-ms-grid-rows: (20%)[5];
width: 90%;
height: 95%;
border: 1px dotted black;
margin: auto;
}
#blogPage > header {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
border: 1px dotted black;
}
#blogPage > footer {
-ms-grid-column: 1;
-ms-grid-row: 5;
-ms-grid-column-span: 3;
border: 1px dotted black;
}
#blogPage > article {
-ms-grid-column: 2;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
border: 1px dotted black;
}
#blogPage > #calender {
-ms-grid-column: 3;
-ms-grid-row: 3;
border: 1px dotted black;
}
#blogPage > #blogRoll {
-ms-grid-column: 3;
-ms-grid-row: 4;
border: 1px dotted black;
}
#blogPage > #aboutMe {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
border: 1px dotted black;
}
#blogPage > #bloghistory {
-ms-grid-column: 3;
-ms-grid-row: 2;
border: 1px dotted black;
}
</style>
</head>
<body>
<div id="blogPage">
<header>My Blog Header</header>
<article>My Blog's Main Body</article>
<footer>My Blog Footer</footer>
<aside id="calender">A calender</aside>
<aside id="blogRoll">My favorite blogs</aside>
<aside id="aboutMe">Who am I?</aside>
<aside id="bloghistory">My blog history</aside>
</div>
</body>
Ads Right
