CSS Grid пример адаптивной верстки

Последнее обновление на 04.01.2023

CSS Grid пример адаптивной верстки
CSS код:

<div class="mygrid">
  <div id="name">Name</div>
  <div id="menu">Menu</div>
  <div id="main">Main</div>
  <div id="head">Head</div>
  <div id="menu3">Menu-3</div>
	<div id="menu2">Menu-2</div>
	
  <div id="name1">Name</div>
  <div id="menu4">Menu-4</div>
	<div id="menu5">Menu-5</div>
	
  <div id="footer2">Footer-2</div>
  <div id="footer3">Footer-3</div>
  
</div>

HTML код:

.mygrid {
  display: grid;
  grid-template-columns:
    auto 1fr auto;
  grid-template-rows:
    auto 1fr auto auto;
    height: 100vh;
}

#name    { grid-column: 1; grid-row: 1; }
#menu3    { grid-column: 1; grid-row: 3; }
#menu    { grid-column: 1; grid-row: 2; }
#footer2    { grid-column: 1 / span 2; grid-row: 4;  }	
#main    { grid-column: 2; grid-row: 2; }
#head    { grid-column: 2; grid-row: 1; }
#menu4 { grid-column: 2; grid-row: 3; justify-self: center; }
/*#menu6    { grid-column: 2; grid-row: 4; }*/
#name1    { grid-column: 3; grid-row: 1; }
#menu5    { grid-column: 3; grid-row: 3; }
#menu2   { grid-column: 3; grid-row: 2; }
#footer3   { grid-column: 3; grid-row: 4;}

/*
body{ 
margin:0; 
}
*/
.mygrid > *{ padding: 1em; }

#name    { background: orange; color:white; }
#name1    { background: orange; color:white; }
#head     { background: green; color:white; }
#main { background: orange; color:white; }
#menu   { background: green; color:white; }
#menu2     { background: green; color:white; }
#menu3    { background: orange; color:white; }
#menu4 { background: green; color:white; }
#menu5 { background: orange; color:white; }
#footer2 { background: orange; color:white; }
#footer3 { background: green; color:white; }	

Демонстрация адаптивной верстки шаблона Grid