Добрый день. Только начал изучать 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)
}
Простой
Средний
Простой