Расположение блоков в Grid CSS

#html #css #css3 #html5 #css_grid

Ребят, помогите с помощью Grid CSS сделать структуру, как на картинке. Родитель должен
занимать все пространство экрана. Только познакомился с этим стилем и не могу найти
решение. 


    

Ответы

Ответ 1

Не знаю что тут сложного, но добавлю формальный ответ:



.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: content; }

.grid-container {
  display: grid;
  grid-template-areas:
    'menu header header header header header'
    'menu content content content content content'
    'menu content content content content content';
  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;
}

  
Header
  
Menu
  
Content





Источник    

Update:  

Есть хороший ресурс, помимо вышеуказанного, где вы можете в игровой форме разобраться
с сеткой, называется: Grid Garden


Ответ 2

.wrapper {
  display: grid;
  grid-template-columns: 20% 80%;
}
.wrapper div {
  border: 1px solid red;
}
#sidebar {
  grid-row-start: 1;
  grid-row-end: 3;
}






  
  
sidebar
  
header
  
content





Ответ 3

.container {
    display: grid;
    grid-template-columns: 100px 400px;;
    grid-template-rows: 100px 400px;
}

.container1 {
    border: 3px solid brown;
    grid-area: 1 / 1 / 3 / 2;
}

.container2 {
    border: 3px solid green;
    grid-area: 1 / 2 / 2 / 3;
}

.container3 {
    border: 3px solid blue;
    grid-area: 2 / 2 / 3 / 3;
}

	

	

	

	




Вот мое решение