Full Example of HTML CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container { display: grid; grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; gap: 10px; background-color: #2196F3; padding: 10px;
}
.grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>
<div class="grid-container"> <div class="item1">Header</div> <div class="item2">Menu</div> <div class="item3">Main</div> <div class="item4">Right</div> <div class="item5">Footer</div>
</div>
</body>
</html>
Output should be:
| Full Example of HTML CSS Grid Layout | HTML Layout |
| HTML Layout | HTML Layout |
| HTML Layout Elements | HTML Layout |
| HTML Layout Techniques | HTML Layout |
| How to create CSS Frameworks Layout | HTML Layout |
| How to create HTML CSS Float Layout | HTML Layout |
| How to create HTML CSS Flexbox Layout | HTML Layout |
| How to create HTML CSS Grid Layout | HTML Layout |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Layout |
|
Uploaded by
: |
Admin |