@Clazzzer123

Как адаптировать сайт с css grid?

Есть сайт с css grid, не могу сделать так чтобы при определенной ширине области просмотра три колонки расположенные по х стали расположены по у
html
<header>
            <div class = "container"></div>
        </header>
        <section>
            <div class = "top_block">
                <div class = "reasons_block"></div>
                <div class = "info_block"></div>
            </div>
            <div class = "down_block">
                <div class = "design_block"></div>
                <div class = "hosting_block"></div>
                <div class = "marketing_block"></div>
            </div>
        </section>
        <footer>
        </footer>

css
body {
  display: grid;
  min-height: 180vh;
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "content" "footer";
}
header {
  border: 1px solid black;
  grid-area: heading;
  min-height: 68.4vh;
}
section {
  grid-area: content;
  height: 94.6vh;
  grid-template-columns: 1fr;
  grid-template-areas: "top" "down";
}
section .top_block {
  grid-area: top;
  display: grid;
  height: 50%;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "reasons info";
}
section .top_block .reasons_block {
  border: 1px solid black;
  grid-area: reasons;
}
section .top_block .info_block {
  border: 1px solid black;
  grid-area: info;
}
section .down_block {
  grid-area: down;
  display: grid;
  height: 50%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "design hosting marketing";
}
section .down_block .design_block {
  grid-area: design;
  border: 1px solid black;
}
section .down_block .hosting_block {
  grid-area: hosting;
  border: 1px solid black;
}
section .down_block .marketing_block {
  grid-area: marketing;
  border: 1px solid black;
}
footer {
  border: 1px solid black;
  grid-area: footer;
  min-height: 17vh;
}
@media only screen and (max-width: 1200px) {
  .top_block {
    grid-template-columns: 1fr;
    grid-template-areas: "reasons" "info";
  }
  .down_block {
    grid-template-columns: 1fr;
    grid-template-areas: "design" "hosting" "marketing";
  }
}
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
vessels
@vessels
Ни черта не понял, но очень интересно!
Используйте
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы