grid layout គឺជាបច្ចេកទេសតំរៀប element មួយចំនួននៅក្នុងក្រឡាចត្រង្គឬក្រឡាសំណាញ់ (grid) របស់ element ណាមួយទៀត ដែលផ្ទៃរបស់វាត្រូវបានបែងចែកជាក្រឡាចត្រង្គឬក្រឡាសំណាញ់ ដោយ property display ។ ពិនិត្យកូដខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Grid Container</title>
    <style>
      .grid-container {
  		display: grid;
  		grid-template-columns: auto auto auto auto;
  		grid-gap: 20px 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>
	grid-template-columns

	You can use the grid-template-columns property to specify the number of columns in your grid layout.

	
 	  1
  	  2
  	  3  
  	  4
  	  5
  	  6  
  	  7
  	  8
	
  </body>
</html>

grid-template-columns

You can use the grid-template-columns property to specify the number of columns in your grid layout.