ជាទូទៅ នៅក្នុងការរចនាគេហទំព័រនានាអោយមានលក្ខណៈ responsive យើងអាចប្រើប្រាស់ @media rule ក្នុងការតំរូវអោយមានការផ្លាស់ប្តូរតំលៃរបស់ property ទាំងឡាយ អនុលោមទៅតាមទំហំនៃ screen របស់ឧបករណ៍អេឡិចត្រូនិក។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Responsive Grid Layout</title>
    <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';
  		grid-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;
	  }
      
      @media only screen and (max-width: 768px) {
  		.grid-container {
  		  grid-template-areas:
    		'header'
    		'menu'
    		'main' 
    		'right'
    		'footer';
  		}
	  }
    </style>
  </head>
  
  <body>
	The grid-area Property

	You can use the grid-area property to name grid items.

	You can refer to the name when you set up the grid layout, by using the grid-template-areas property on the grid container.

	This grid layout contains six columns and three rows:

	
  	  Header
  	  Menu
  	  Main  
  	  Right
  	  Footer
	
  </body>
</html>

The grid-area Property

You can use the grid-area property to name grid items.

You can refer to the name when you set up the grid layout, by using the grid-template-areas property on the grid container.

This grid layout contains six columns and three rows:

Header

Main

Right

Footer