У меня проблемы с добавлением изображений в сетку.Я пытаюсь научиться работать с сеткой, и у меня есть все столбцы и строки, как я хочу, но когда я добавляю изображение, оно не подходит, как должно!Это отталкивает все остальные колонны.Что я делаю неправильно?Извините, что кода пока нет в сокращенной версии, я изучаю его, сначала выписав все, поэтому я на 100% понимаю, что я печатаю.Когда все правильно, я делаю это короче, это своего рода учебный процесс!;) получил шаблон от W3.
.main {
max-height:90vh;
}
.item1 { grid-column: 1 / span 11; }
.item2 { grid-column: 12 / span 2 ; }
.item3 { grid-column: 14/ span 11 ; }
.item4 { grid-column: 1 / span 6;}
.item5 { grid-column: 7 / span 6 ; }
.item6 { grid-column: 13 / span 6 ; }
.item7 { grid-column: 19 / span 6; }
.item8 {grid-column: 1/ span 24;}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
grid-template-rows: 15vh 75vh 10vh;
grid-gap: 1px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px 0;
font-size: 30px;
overflow: hidden;
}
#leftheader {
width:30%;
align-content:flex-end;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>websiteportfolio</title>
<link href="indexcss.css" rel="stylesheet" type="text/css">
<head>
</head>
<body>
<div class="main">
<div class="grid-container">
<div class="item1"> <img src="text\ellis.png" id="leftheader" alt="Ellis"> </div>
<div class="item2">2 </div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</div>
</body>
</html>