grid-area គឺជា property ដែលត្រូវគេយកទៅប្រើប្រាស់ ក្នុងការកំណត់ឈ្មោះអោយផ្នែកផ្សេងៗនៃផ្ទៃរបស់ element ណាមួយ ដែលផ្ទៃរបស់វាទាំងមូល ត្រូវបានកំណត់ជាក្រឡាចត្រង្គ ឬ ក្រឡាសំណាញ់ (grid) ។ ចំណែកឯ grid-template-areas វីញ វាជា property ដែលត្រូវគេយកទៅប្រើប្រាស់សំរាប់កំណត់ចំនួន column សំរាប់លាតសន្ទឹងផ្នែកនៃក្រឡាចត្រង្គណាមួយដែលត្រូវបានដាក់ឈ្មោះថាអ្វីមួយ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Grid-Area Property</title>
    <style>
      .item1 {
  		grid-area: myArea;
	  }

	  .grid-container {
  		display: grid;
  		grid-template-areas: 'myArea myArea myArea myArea myArea';
  		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;
	  }
    </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.

	Item1, is called "myArea" and will take up the place of all five columns:

	
  	  1
  	  2
  	  3  
  	  4
  	  5
  	  6
	
  </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.

Item1, is called "myArea" and will take up the place of all five columns: