Поработаем над размещением элементов.
Блок .grid-container надо сделать grid контейнером.
Grid должен состоять из трех колонок.
Первая шириной 20vw, название линий - ‘start’ и ‘col-1-end’.
Вторая с автоматической шириной, название линий - ‘col-2-start’ и ‘col-2-end’.
Третья шириной 20vw, название линий - ‘col-3-start’ и ‘end’.
Еще Grid должен состоять из 4х строчек.
Названия разделительных линий должны быть ‘line1’, ‘line2’, ‘line3’, ‘line4’, ‘line5’.
Высота второй и третей строк должна быть 20vh, первой и последней auto.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Grid layout</title>
<style>
body {
margin: 0;
}
.grid-container {
height: 100vh;
width: 100vw;
}
.grid-item {
background-color: rgb(255, 198, 0);
padding: 2vw;
font-size: 10vw;
font-style: italic;
font-family: Tahoma;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
Center Me
</div>
</div>
</body>
</html>