Задать вопрос

ihavesoul

Комментарии

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

    @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 толку совсем мало
    Написано

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

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

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