Не могу понять как сделать адаптивную верстку?

Question

[ceo444]

Не могу настроить grid для мобильной версии сайта. Первый и второй скрины - мой результат, на последней макет. Браузер зачеркивает areas.

.profile {
    margin: 0;
    padding: 0;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 51px;
    display: grid;
    max-width: 880px;
    grid-template-areas: "profile__image profile__title profile__edit-button profile__add-button" "profile__image profile__title profile__edit-button profile__add-button";
    grid-template-columns: 150px 312px 1fr 150px;
}

@media (max-width: 740px) {
    .profile {
        grid-template-areas: "profile__image profile__title profile__edit-button" "profile__image profile__subtitle profile__edit-button" "profile__add-button profile__add-button profile__add-button";
        grid-template-columns: 150px 312px 1fr;
        max-width: 600px;
    }
}

@media (max-width: 680px) {
    .profile {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 120px 1fr 1fr 1fr;
        grid-template-areas: "profile__image profile__image profile__image" "profile__title profile__edit-button" "profile__subtitle profile__subtile profile__subtitle" "profile__add-button profile__add-button profile__add-button";
    }
}

Comments

[Ankhena]

Браузер зачеркивает areas.

А вы попробуйте посчитать по сколько элементов в строке у вас получилось на 680.
Сами удивитесь...

[ceo444]

Ankhena, посчитал, добавил пропущенный. Не помогло.

.profile {
    margin: 0;
    padding: 0;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 51px;
    display: grid;
    max-width: 880px;
    grid-template-areas: "image title edit addb" "image subtitle edit addb";
    grid-template-columns: 150px 312px 1fr 150px;
}

@media (max-width: 740px) {
    .profile {
        grid-template-areas: "image title edit" "image subtitle edit" "addb addb addb";
        grid-template-columns: 150px 312px 1fr;
    }
}

@media (max-width: 680px) {
    .profile {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 120px 1fr 1fr 1fr;
        grid-template-areas: "image image image" "title title edit" "subtitle subtile subtitle" "addb addb addb";
    }
}

[Ankhena]

ceo444, теперь еще немножко внимательности...
"subtitle subtile subtitle"

беда прям...
Ну не знаю, увеличьте шрифт в редакторе, чтобы лучше видеть..

[ceo444]

Ankhena, не помогло xD но спасибо!

[Ankhena]

ceo444, значит, делайте песочницу на codepen.io, чтобы видеть, что вы еще понаписали

А главный вопрос, где вы там на макете 3 колонки нашли...

[Froggyweb]

Area - это ад, особенно с БЭМ....

Answer 1

[Anarchy]

Потому что нужно прописывать не классы, а проставленные areas. Пример:

.profile__image{grid-area: a;}
.profile__title{grid-area: b;}
.profile__edit-button{grid-area: c;}
.profile{
		display: grid;
		grid-template-areas:
		"a a"
		"b c"
		"b d";
		grid-gap: 10px 20px;
		grid-auto-rows: min-content;
		grid-template-columns: 38.81% 49.7%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/g...

Comments

[Ankhena]

Никто не запрещает называть области по названию классов.

[ceo444]

не помогло все равно.