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

155

09 июля 2019, 05:40

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

Answer 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; 
}

<div class="grid-container"> 
  <div class="item1">Header</div> 
  <div class="item2">Menu</div> 
  <div class="item3">Content</div> 
</div>

Источник

Update:

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

Answer 2

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

<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div class="wrapper"> 
   
  <div id='sidebar'>sidebar</div> 
  <div id='header'>header</div> 
  <div id='content'>content</div> 
</div> 
</body> 
</html>

Answer 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; 
}

<div class="container"> 
	<div class="container1"></div> 
	<div class="container2"></div> 
	<div class="container3"></div> 
</div>

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

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

HTML5 video не работает в Safari

Видео на странице работает в Chrome, Firefox но не работает в Safari

144

HTML

Сообщение с условием Да и Нет

Необходимо при нажатии на кнопку чтобы выходило сообщение - Обращение в отношении Заявителя или другого лица если type= Жалоба

128

jQuery

Summernote removeMedia из плагина

После изучения основных wysiwyg редакторов решил остановиться на summernoteРеализовал плагин загрузки изображений на сервер и вставки их в редактор

139

jQuery

Слайдер jQuery UI

Как сделать так, чтобы при вводе значений в поля, они влияли на положение бегунков слайдера? И не могу понять как сделать ограничение на ввод...

184