6

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

введите сюда описание изображения

1
  • Где ваш код? Что именно не получается? Здесь кода на 10 строк не больше
    – E_K
    27 дек 2018 в 19:59

3 ответа 3

8

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

.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

3
  • 1
    благодарю за ответ и за полезную ссылку. Не хватает времени до конца разобраться с гридами. А теперь надеюсь меньше времени понадобится 27 дек 2018 в 21:58
  • 1
    @Alexandr_TT а я благодарен тебе, за подробные посты по SVG, читаю их с удовольствием и некоторые даже уже применял. Кстати, с svg-art тоже много чего для себя нового открыл.
    – user262779
    28 дек 2018 в 6:21
  • 1
    благодарю за отзыв. Может быть подвигнет меня наконец заняться сайтом. А то сюда всё, а на сайт почти ничего уже почти 2 года.:) 28 дек 2018 в 6:27
5

.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>

4

.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>	

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.