Horje

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



Related Articles
What is HTML Layout HTML Layout
What is HTML Layout Elements HTML Layout
What is 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

Single Articles
How is to HTML Input Type MonthHTML Layout
Full Code Example of HTML Input Type MonthHTML Layout

Type:
Html
Category:
Web Tutorial
Sub Category:
HTML Layout
Uploaded by:
Admin



Share on: