Как верно сделать адаптивную верстку с помощью Grid (css)?

Question

[ihavesoul]

Добрый день. Только начал изучать Grid , до этого не работал в принципе ни с какими устройствами верстки ( BS,Flex и т.д.) .Новичок в Web .
Хочу сделать адаптивность, смог сделать саму главную страницу. При изменении разрешения с помощью media должно убираться меню боковое ( сделал) и по идее все блоки должны сместится влево на место меню. Но ничего не происходит совсем. Посмотрел уроки, пытался сделать как там, но почему-то ничего не работает. Я делаю что-то не так это 100%, но не понимаю что.
Спасибо за внимание, надеюсь на вашу помощь
Вот код css

@media screen and (orientation:portrait){
    div:nth-child(2){
       display: none;
            }
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,9fr));
    grid-gap:20px;
   
}
.grid div {
    background-color: #507299;
	border: 1px solid #212941;
	border-radius: px;
	padding: 8px 15px;
	color: #ffffff;
	font-size: 18px;
	font-family: roboto;
}
.grid div:nth-child(1) {
    grid-column: 1 / -1;
    grid-row:1/3;
}
.grid div:nth-child(2){
    background-color: #EDEEF0;
    border: none;
    color:#99B1C6;
    grid-row:3;
    grid-column: 1 / 3;
}
.grid div:nth-child(3){
    background-color: white;
    grid-column: 3 / 5;
    grid-row:3 / 10;
}
.grid div:nth-child(4){
    grid-column:5/10;
    grid-row:3/8;
    background-color: white;
}
.grid div:nth-child(5){
    grid-column:5/10;
    grid-row:8/14;
    background-color: white;
}
.grid div:nth-child(6){
    grid-column: 5/10;
    grid-row:14/16;
    background-color: white;
}
.grid div:nth-child(7){
    grid-column: 5/10;
    grid-row:16/29;
    background-color: white;
}
body{
   background-color: #EDEEF0;
   margin: 0;
   display: flex; 
   height: 100vh; 
   flex-direction: column;
}
.log {
  float:left;
  margin-left: 80px;
  margin-top:10px;
  height: 19px;
  width: 34px;
  background: url(http://vk.com/images/svg_icons/ic_head_logo.svg)
}

Answer 1

[Oblfakir]

Попробуйте сделать по примеру отсюда: https://metanit.com/web/html5/13.12.php

Comments

[ihavesoul]

.grid{
    display: grid;
    grid-gap:10px;
    grid-template-areas:
        "upbar"
        "sidebar"
        "avatar"
        "info"
        "upload"
        "post"
        "wall";   
}
.grid div {
    background-color: #507299;
	border: 1px solid #212941;
	border-radius: px;
	padding: 8px 15px;
	color: #ffffff;
	font-size: 18px;
	font-family: roboto;
}
.grid div:nth-child(1) {
}
.grid div:nth-child(2){
    background-color: #EDEEF0;
    border: none;
    color:#99B1C6;
}
.grid div:nth-child(3){
    background-color: white;
}
.grid div:nth-child(4){
    background-color: white;
}
.grid div:nth-child(5){
    background-color: white;
}
.grid div:nth-child(6){
    background-color: white;
}
.grid div:nth-child(7){
    background-color: white;
}

.upbar{
    grid-area:upbar;
}
.sidebar{
    grid-area: sidebar;
}
.avatar{
    grid-area: avatar;
}
.info{
    grid-area: info;
}
.upload{
    grid-area: upload;
}
.post_{
    grid-area: post;
}
.wall{
    grid-area: wall;
}
@media (min-width: 640px) {
	.grid {
        grid-template-columns: 1fr 6fr;
		grid-template-areas:
			"upbar upbar"
            "sidebar avatar"
            "sidebar info"
            "sidebar wall"
            "sidebar upload"
            "sidebar post"
	}

Пробовал использовать area , но т.к. у меня явно заданы grid - column , grid - row , то они попросту не работают. Начинаю убирать все "явные"настройки и делать по area и получается что-то ужасное
UPD:Я сделал всё по area , но теперь не знаю как мне задавать размеры grid .Т.к. если указывать явно, то от area толку совсем мало

Answer 2

[Gortyser]

Тут дело в том, что вы убираете боковое меню, но у вас жестко заданы grid-column и grid-row для все остальных элементах. В итоге они остаются на своих местах.
Можете попробовать не задавать grid-column: 1/3 (например), а grid-column: span 2.
Почитать можно здесь, например.
Ничего более конкретного сказать не могу, нужен хотя бы html-код еще.

Comments

[ihavesoul]

Большое спасибо, я вроде как более или менее с этим разобрался.
По поводу html кода, там все примитивно ,все висит в

<!DOCTYPE html>
<html>
<head>
<link type=text/css rel=stylesheet href=main.css>
</head>
<div class="grid">
<div></div>
   <body bgcolor="#EDEEF0">
    <div  >
    Моя страница
    <br>Новости
    <br>Мои аудиозаписи
    <br>Сообщения
    <br>Друзья
    <br>Группы
    <br>Музыка
    <br>Видео
    </div>
<div class="log">  </div>
<div >block 4</div>
<div >block 5</div>
<div >block 6</div>
<div >block 7</div>
</body>
</div>
</html>

Но все ещё думаю..что моя адаптивная верстка оставляет желать лучшего, догадываюсь ,что если добавить текст или картинку в блоки, то все сломается